:root{
    color-scheme: light;
    /* ============== NOVA PALETA: CLARA & CLÁSSICA ============== */
    --bone:         #F7F3EA;
    --bone-deep:    #EFE8D6;
    --paper:        #FCFAF3;
    --ink:          #1E2316;
    --ink-deep:     #0E1108;
    --forest:       #313921;
    --forest-soft:  #4A5733;
    --moss:         #6B7A4F;
    --gold:         #B8965A;
    --gold-soft:    #D4B98C;
    --gold-faint:   #E8DCC0;
    --gold-deep:    #8C6F3A;
    --cream:        #F7F3EA;       /* alias for legacy refs */
    --cream-dim:    #6B6E5C;       /* legacy alias — used for muted text on light bg */
    --line:         rgba(49,57,33,0.18);
    --line-strong:  rgba(49,57,33,0.40);
    --line-gold:    rgba(184,150,90,0.5);

    --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --font-italic:  'Cormorant Garamond', Georgia, serif;
    --font-body:    'Manrope', system-ui, sans-serif;

    --max: 1240px;
    --ease: cubic-bezier(.22, 1, .36, 1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; overflow-x: hidden; }
  body{
    font-family: var(--font-body);
    background: var(--bone);
    color: var(--ink);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* grain overlay */
  body::before{
    content:"";
    position: fixed; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.22  0 0 0 0 0.13  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.55;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1000;
  }

  h1,h2,h3,h4{
    font-family: var(--font-display);
    font-weight: 300;
    color: var(--forest);
    letter-spacing: -0.015em;
    line-height: 1.02;
  }
  h1{ font-size: clamp(56px, 9vw, 140px); font-variation-settings: "opsz" 144, "SOFT" 70; }
  h2{ font-size: clamp(38px, 5.4vw, 76px); font-variation-settings: "opsz" 96, "SOFT" 40; }
  h3{ font-size: clamp(22px, 2.4vw, 32px); font-variation-settings: "opsz" 36; color: var(--ink); }
  em{ font-family: var(--font-italic); font-style: italic; color: var(--gold); font-weight: 400; }
  strong{ color: var(--forest); font-weight: 500; }
  p{ max-width: 58ch; text-wrap: pretty; }
  a{ color: var(--gold); text-decoration: none; transition: color .3s var(--ease); }

  .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 40px; }
  .eyebrow{
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .35em;
    color: var(--gold);
    font-weight: 500;
    display: inline-flex; align-items:center; gap:14px;
    margin-bottom: 28px;
  }
  .eyebrow::before{
    content:""; width: 28px; height:1px; background: var(--gold);
  }

  /* ============ NAV ============ */
  .nav{
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 22px 40px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--bone);
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
    transition: all .4s var(--ease);
  }
  .nav.scrolled{
    background: rgba(247, 243, 234, .94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 16px 40px;
    color: var(--forest);
    text-shadow: none;
  }
  .nav-brand{
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: .08em;
    color: var(--bone);
    font-weight: 300;
    text-transform: none;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
    transition: color .4s var(--ease);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1;
  }
  .nav-brand-mark{
    display: block;
    height: 22px;
    width: auto;
    /* Match the bone/cream nav text on dark hero — invert dark logo to light */
    filter: brightness(0) invert(1);
    transition: filter .4s var(--ease);
  }
  /* On scrolled / light-bg states the logo returns to its natural forest tone */
  .nav.scrolled .nav-brand-mark,
  body[data-hero-style="paper"] .nav-brand-mark,
  body[data-hero-style="split"] .nav-brand-mark,
  body[data-hero-style="botanical"] .nav-brand-mark,
  body[data-hero-style="archway"] .nav-brand-mark,
  body[data-hero-style="gallery"] .nav-brand-mark{
    filter: none;
  }
  .nav-brand em{
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-soft);
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    margin-top: 2px;
    font-weight: 500;
  }
  .nav-links{
    display: flex; gap: 36px;
  }
  .nav-links a{
    color: var(--bone);
    position: relative;
    padding: 4px 0;
    text-shadow: 0 1px 10px rgba(0,0,0,.6);
    transition: color .4s var(--ease);
  }
  .nav-links a:hover{ color: var(--gold); }
  .nav-links a::after{
    content:""; position: absolute; left: 0; bottom: 0;
    width: 0; height: 1px; background: var(--gold);
    transition: width .4s var(--ease);
  }
  .nav-links a:hover::after{ width: 100%; }
  .nav-cta{
    border: 1px solid var(--gold);
    padding: 12px 22px;
    color: var(--bone);
    letter-spacing: .3em;
    font-size: 10px;
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
    transition: all .3s var(--ease);
  }
  /* Grupo de ações no topo (WhatsApp + CTA), sempre visível na nav fixa */
  .nav-actions{ display: flex; align-items: center; gap: 16px; }
  .nav-wa{
    display: inline-flex; align-items: center; gap: 8px;
    background: #25D366;              /* verde WhatsApp — fixo nos dois estados da nav */
    color: #fff;
    padding: 10px 16px;
    border-radius: 100px;
    font-size: 10px; letter-spacing: .2em;
    box-shadow: 0 4px 16px rgba(37,211,102,.35);
    transition: all .3s var(--ease);
  }
  .nav-wa svg{ width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
  .nav-wa:hover{ background: #1fb457; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,.45); }
  @media (max-width: 600px){
    .nav{ padding: 16px 20px; }
    .nav-actions{ gap: 10px; }
    .nav-wa{ padding: 9px 11px; }
    .nav-wa span{ display: none; }   /* no celular fica só o ícone (universalmente reconhecido) */
    .nav-cta{ padding: 10px 14px; letter-spacing: .15em; }
  }
  .nav-cta:hover{ background: var(--gold); color: var(--forest); border-color: var(--gold); }
  /* === SCROLLED state forces ALL nav text to dark forest === */
  .nav.scrolled .nav-brand{ color: var(--forest); text-shadow: none; }
  .nav.scrolled .nav-brand em{ color: var(--gold); }
  .nav.scrolled .nav-links a{ color: var(--forest); text-shadow: none; }
  .nav.scrolled .nav-links a:hover{ color: var(--gold); }
  .nav.scrolled .nav-cta{
    color: var(--forest);
    border-color: var(--forest);
    text-shadow: none;
  }
  .nav.scrolled .nav-cta:hover{ background: var(--forest); color: var(--bone); border-color: var(--forest); }
  @media (max-width: 820px){
    .nav-links{ display: none; }
    .nav{ padding: 18px 24px; }
  }

  /* ============ HERO — CINEMATIC V2 ============ */
  .hero{
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 140px 40px 40px;
    background: var(--bone);
    position: relative;
    overflow: hidden;
  }
  .hero-bgimg{
    position: absolute; inset: 0;
    background-image:
      linear-gradient(180deg, rgba(14,17,8,.55) 0%, rgba(14,17,8,.45) 40%, rgba(14,17,8,.85) 100%),
      url('assets/vg-bg-01-lawn-palms.webp');
    background-size: cover;
    background-position: center;
    filter: saturate(.95) brightness(.98);
    animation: heroZoom 18s ease-out forwards;
    transform-origin: center;
  }
  /* Real Villa Garden logo as botanical overlay (replaces the decorative arch) */
  .hero-logo-bg{
    position: absolute; inset: 0;
    background-image: url('assets/villa-garden-id-visual.svg');
    background-repeat: no-repeat;
    background-position: center 52%;
    background-size: auto min(86%, 880px);
    opacity: .22;
    filter: brightness(1.05) saturate(.85);
    pointer-events: none;
    z-index: 1;
    animation: heroLogoIn 2.4s var(--ease) .25s both;
    transform-origin: center;
  }
  @keyframes heroLogoIn{
    from{ opacity: 0; transform: scale(1.05); }
    to{ opacity: .22; transform: scale(1); }
  }
  /* Hide the decorative arch on the default hero — the real logo takes its place */
  body:not([data-hero-style]) .hero-overlay-arch,
  body[data-hero-style="default"] .hero-overlay-arch{ display: none !important; }
  @keyframes heroZoom{
    from{ transform: scale(1.08); }
    to{ transform: scale(1); }
  }
  .hero-overlay-arch{
    position: absolute;
    top: 44%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(62vw, 780px);
    height: min(70vh, 760px);
    border: 1px solid rgba(242,211,142,.45);
    border-radius: 50% 50% 4% 4% / 38% 38% 2% 2%;
    pointer-events: none;
    opacity: 0;
    animation: archIn 2s var(--ease) .3s forwards;
    z-index: 1;
  }
  .hero-overlay-arch::after{
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(242,211,142,.18);
    border-radius: 50% 50% 3% 3% / 38% 38% 2% 2%;
  }
  @media (max-width: 820px){
    .hero-overlay-arch{ width: 86vw; height: 64vh; top: 42%; }
  }
  .hero-overlay-arch::before{
    content:''; position: absolute; inset: 16px;
    border: 1px solid rgba(242,211,142,.18);
    border-radius: 50% 50% 4% 4% / 38% 38% 2% 2%;
  }
  @keyframes archIn{
    from{ opacity: 0; transform: translate(-50%, -48%) scale(.94); }
    to{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .hero-overlay-arch .badge{
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: rgba(30,35,22,.85);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .45em;
    text-transform: uppercase;
    padding: 6px 18px;
    white-space: nowrap;
  }
  /* animated canopy of leaves in background */
  .hero-bg{
    position: absolute; inset: 0;
    background-image:
      radial-gradient(ellipse 60% 80% at 85% 40%, rgba(91,107,66,.25), transparent 70%),
      radial-gradient(ellipse 40% 60% at 15% 70%, rgba(62,74,45,.35), transparent 70%);
    pointer-events: none;
  }
  .hero-bg svg{
    position: absolute;
    opacity: .14;
    animation: sway 18s ease-in-out infinite;
  }
  .hero-bg .l1{ top: -60px; right: -40px; width: 520px; }
  .hero-bg .l2{ bottom: -80px; left: -60px; width: 440px; animation-delay: -6s; }
  @keyframes sway{
    0%, 100%{ transform: rotate(0deg); }
    50%{ transform: rotate(4deg); }
  }
  .hero .wrap{
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 3;
  }
  .hero .wrap > div{ position: relative; z-index: 3; }
  .hero-meta{
    background: linear-gradient(180deg, rgba(14,17,8,0), rgba(14,17,8,.65));
    backdrop-filter: blur(2px);
    margin-top: 56px;
    border-top: 1px solid rgba(184,150,90,.3);
  }

  .hero h1{
    font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--bone);
    font-size: clamp(34px, 4.6vw, 72px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-shadow: 0 2px 24px rgba(0,0,0,.85), 0 6px 60px rgba(0,0,0,.7);
    position: relative;
    z-index: 3;
  }
  .hero h1 .line{ display: block; overflow: hidden; }
  .hero h1 .line > span{
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: rise 1.2s var(--ease) forwards;
  }
  .hero h1 .line:nth-child(2) > span{ animation-delay: .25s; color: var(--gold); font-style: italic; font-family: var(--font-italic); font-weight: 400; }
  .hero h1 em{ color: var(--gold); display: inline; font-family: var(--font-italic); }
  @keyframes rise{
    to{ opacity: 1; transform: translateY(0); }
  }

  .hero-lede{
    margin: 32px auto 0;
    font-size: 15px;
    color: var(--bone);
    opacity: .9;
    max-width: 48ch;
    line-height: 1.7;
    opacity: 0;
    animation: fade 1s var(--ease) .6s forwards;
    text-align: center;
    text-shadow: 0 1px 14px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.6);
  }
  .hero-actions{
    display: flex; gap: 18px; justify-content: center;
    margin-top: 36px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fade 1s var(--ease) 1s forwards;
  }
  .hero-cta{
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 30px;
    font-family: var(--font-body); font-size: 11px;
    letter-spacing: .35em; text-transform: uppercase; font-weight: 500;
    background: var(--gold);
    color: var(--forest);
    border: 1px solid var(--gold);
    transition: all .4s var(--ease);
  }
  .hero-cta:hover{ background: var(--bone); border-color: var(--bone); color: var(--forest); letter-spacing: .4em; }
  .hero-cta-ghost{
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 30px;
    font-family: var(--font-body); font-size: 11px;
    letter-spacing: .35em; text-transform: uppercase; font-weight: 500;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold-deep);
    transition: all .3s var(--ease);
  }
  .hero-cta-ghost:hover{ background: rgba(242,211,142,.08); border-color: var(--gold); }
  .hero-meta{
    margin-top: 56px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line-strong);
    opacity: 0;
    animation: fade 1s var(--ease) 1.1s forwards;
    background: linear-gradient(180deg, rgba(14,17,8,.3), rgba(14,17,8,.75));
  }
  @media (max-width: 820px){
    .hero-meta{ grid-template-columns: repeat(2, 1fr); }
  }
  .hero-meta .m-item{
    padding: 22px 16px;
    border-right: 1px solid rgba(184,150,90,.25);
    text-align: center;
  }
  .hero-meta .m-item:last-child{ border-right: none; }
  @media (max-width: 820px){
    .hero-meta .m-item:nth-child(2){ border-right: none; }
  }
  .hero-meta .m-k{
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold-deep); margin-bottom: 10px;
  }
  .hero-meta .m-v{
    font-family: var(--font-display);
    font-size: 22px; color: var(--gold); font-weight: 300;
    line-height: 1.2;
    font-variation-settings: "opsz" 96;
  }
  .hero-meta .m-v small{
    display: block;
    font-size: 10px; color: var(--gold-deep); letter-spacing: .25em; text-transform: uppercase;
    font-family: var(--font-body); font-weight: 500;
    margin-top: 6px;
  }
  @keyframes fade{
    from{ opacity: 0; transform: translateY(16px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  /* hero aside — portal with logo */
  .hero-portal{
    position: relative;
    aspect-ratio: 3/4;
    opacity: 0;
    animation: fade 1.4s var(--ease) .4s forwards;
  }
  .hero-portal .arch-outer{
    position: absolute; inset: 0;
    border: 1px solid var(--gold-deep);
    border-radius: 50% 50% 6% 6% / 40% 40% 3% 3%;
    overflow: hidden;
    background: rgba(30,35,22,.4);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
  }
  .hero-portal .arch-outer img{
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.85) brightness(.85);
  }
  .hero-portal.logo-mode .arch-outer img{
    filter: none;
    object-fit: contain;
    background: var(--paper);
  }
  .hero-portal .arch-outer::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,17,8,.7));
    pointer-events:none;
  }
  .hero-portal .arch-inner{
    position: absolute; inset: 14px;
    border: 1px solid rgba(242,211,142,.25);
    border-radius: 50% 50% 4% 4% / 38% 38% 2% 2%;
    pointer-events: none;
  }
  .hero-portal .caption{
    position: absolute; bottom: 28px; left: 0; right: 0;
    text-align: center;
    z-index: 2;
  }
  .hero-portal .caption em{
    font-family: var(--font-italic);
    font-size: 20px;
    color: var(--gold);
    font-style: italic;
  }

  .scroll-hint{
    display: none;
  }
  .scroll-hint::before{
    content:""; width: 40px; height: 1px; background: var(--gold-deep);
    animation: scroll-line 2s var(--ease) infinite;
  }
  @keyframes scroll-line{
    0%, 100%{ transform: scaleX(1); transform-origin: left; }
    50%{ transform: scaleX(.3); transform-origin: left; }
  }

  /* ============ SECTIONS ============ */
  section{ padding: 140px 0; position: relative; }
  @media (max-width: 820px){ section{ padding: 96px 0; } }

  /* ============ O ESPAÇO ============ */
  .espaco{ background: var(--bone); }
  .espaco-grid{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 100px;
    align-items: center;
  }
  @media (max-width: 900px){ .espaco-grid{ grid-template-columns: 1fr; gap: 60px; } }
  .espaco-grid h2{ color: var(--forest); max-width: 14ch; }
  .espaco-grid h2 em{ color: var(--gold); }
  .espaco-grid p{ margin-top: 28px; color: var(--ink); opacity: .85; font-size: 16px; }
  .espaco-grid p + p{ margin-top: 18px; }
  .stats{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 56px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .stat{
    background: var(--paper);
    padding: 32px 20px;
    text-align: center;
  }
  .stat .n{
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 48px);
    color: var(--forest);
    font-weight: 300;
    font-variation-settings: "opsz" 96;
    line-height: 1;
  }
  .stat .l{
    font-size: 10px;
    color: var(--gold-deep);
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-top: 10px;
  }

  /* photo stack */
  .photo-stack{
    position: relative;
    aspect-ratio: 3/4;
  }
  .photo-stack .p{
    position: absolute;
    border: 1px solid var(--line);
    background-size: cover;
    background-position: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    overflow: hidden;
  }
  .photo-stack .p1{
    inset: 0 35% 25% 0;
    background-image:
      linear-gradient(160deg, rgba(247,243,234,.0) 0%, rgba(49,57,33,.18) 100%),
      url('assets/vg-bg-01-lawn-palms.webp');
    background-size: cover;
    background-position: center;
  }
  .photo-stack .p2{
    inset: 28% 0 0 40%;
    background-image:
      linear-gradient(200deg, rgba(184,150,90,.0) 0%, rgba(49,57,33,.20) 100%),
      url('assets/vg-bg-04-flowers-cake.webp');
    background-size: cover;
    background-position: center;
  }
  .photo-stack .p span{
    position: absolute;
    bottom: 16px; left: 16px;
    font-size: 10px;
    color: var(--gold);
    letter-spacing: .3em;
    text-transform: uppercase;
    background: rgba(30,35,22,.7);
    color: var(--bone);
    padding: 6px 12px;
    border: 1px solid var(--line);
  }

  /* ============ CELEBRAÇÕES ============ */
  .celebracoes{
    background: var(--bone-deep);
  }
  .cel-head{
    display: flex; justify-content: space-between; align-items: end;
    margin-bottom: 72px;
    gap: 40px;
    flex-wrap: wrap;
  }
  .cel-head h2{ color: var(--forest); max-width: 16ch; }
  .cel-head h2 em{ color: var(--gold); }
  .cel-head .counter{
    font-size: 11px;
    color: var(--gold-deep);
    letter-spacing: .3em;
    text-transform: uppercase;
  }

  .cel-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  @media (max-width: 1000px){ .cel-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .cel-grid{ grid-template-columns: 1fr; } }

  .cel-card{
    aspect-ratio: 3/4.4;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    background: var(--paper);
    transition: transform .6s var(--ease), border-color .4s var(--ease);
    cursor: pointer;
  }
  .cel-card:hover{
    transform: translateY(-8px);
    border-color: var(--gold-deep);
  }
  .cel-card .arch-clip{
    position: absolute; inset: 14px;
    border-radius: 50% 50% 4% 4% / 32% 32% 3% 3%;
    overflow: hidden;
    transition: inset .8s var(--ease);
  }
  .cel-card:hover .arch-clip{ inset: 8px; }
  .cel-card .arch-clip::before{
    content:""; position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .8s var(--ease), filter .6s var(--ease);
  }
  .cel-card:hover .arch-clip::before{
    transform: scale(1.05);
    filter: saturate(1.3) brightness(1.05);
  }
  .cel-card .arch-clip::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(49,57,33,.0) 40%, rgba(49,57,33,.85) 100%);
    pointer-events: none;
  }
  .cel-card.c1 .arch-clip::before{
    background-image: url('assets/vg-bg-01-lawn-palms.webp');
    background-size: cover; background-position: center;
    filter: saturate(.85) brightness(.9);
  }
  .cel-card.c2 .arch-clip::before{
    background-image: url('assets/vg-strip-07.webp');
    background-size: cover; background-position: center;
    filter: saturate(.85) brightness(.9);
  }
  .cel-card.c3 .arch-clip::before{
    background-image: url('assets/villa-garden-ceremony.webp');
    background-size: cover; background-position: center;
    filter: saturate(.9) brightness(.9);
  }
  .cel-card.c4 .arch-clip::before{
    background-image: url('assets/vg-bg-06-table-view.webp');
    background-size: cover; background-position: center;
    filter: saturate(.85) brightness(.9);
  }
  .cel-card .info{
    position: absolute;
    bottom: 28px; left: 24px; right: 24px;
    z-index: 2;
  }
  .cel-card .num{
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--gold-deep);
    letter-spacing: .25em;
  }
  .cel-card h3{
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--gold);
    font-weight: 300;
    margin-top: 6px;
  }
  .cel-card .label{
    font-size: 10px;
    color: var(--gold-soft);
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-top: 10px;
    font-family: var(--font-italic);
    font-style: italic;
    letter-spacing: .1em;
  }

  /* ============ INCLUSO ============ */
  .incluso{ background: var(--paper); }
  .incluso-wrap{
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: start;
  }
  @media (max-width: 900px){ .incluso-wrap{ grid-template-columns: 1fr; gap: 48px; } }
  .incluso h2{ color: var(--forest); max-width: 12ch; }
  .incluso h2 em{ color: var(--gold); }
  .incluso .lede{
    margin-top: 28px;
    color: var(--ink);
    opacity: .8;
    font-size: 15px;
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--gold);
    border-left: 1px solid var(--line-strong);
    padding-left: 20px;
    line-height: 1.5;
    font-size: 20px;
  }
  .incluso-list{
    list-style: none;
    border-top: 1px solid var(--line);
  }
  .incluso-list li{
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: padding .4s var(--ease);
  }
  .incluso-list li:hover{
    padding-left: 16px;
  }
  .incluso-list .n{
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--gold-deep);
    font-weight: 300;
  }
  .incluso-list .t{
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--forest);
    font-weight: 300;
  }
  .incluso-list .d{
    font-size: 12px;
    color: var(--gold-deep);
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  @media (max-width: 560px){
    .incluso-list li{ grid-template-columns: 40px 1fr; }
    .incluso-list .d{ grid-column: 2; margin-top: 4px; }
  }

  /* ============ GALLERY SHOWCASE (v3) ============ */
  .gallery-sec{
    background: var(--bone);
    padding: 100px 40px 100px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .gal-head{
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 56px;
  }
  @media (max-width: 820px){ .gal-head{ grid-template-columns: 1fr; gap: 24px; } }
  .gal-head h2{ color: var(--forest); max-width: 14ch; font-size: clamp(40px, 5.2vw, 72px); margin-top: 12px; }
  .gal-head h2 em{ color: var(--gold); }
  .gal-lede{ color: var(--ink); opacity: .85; font-size: 16px; line-height: 1.7; max-width: 42ch; }

  .showcase{
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 22px;
    align-items: stretch;
    height: clamp(520px, 64vh, 720px);
  }
  @media (max-width: 900px){
    .showcase{ grid-template-columns: 1fr; height: auto; gap: 16px; }
  }

  /* main stage */
  .stage{
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: var(--bone-deep);
    box-shadow: 0 30px 80px rgba(49,57,33,.18);
  }
  @media (max-width: 900px){ .stage{ aspect-ratio: 4/5; } }

  .stage-img{
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s var(--ease), transform 7s ease-out;
    transform: scale(1);
  }
  .stage-img.active{
    opacity: 1;
    transform: scale(1.04);
  }
  .stage-overlay{
    position: absolute; inset: 0;
    /* precisa segurar o texto do stage-info sobre fotos claras (lago, gramado) */
    background: linear-gradient(180deg, rgba(14,17,8,0) 38%, rgba(14,17,8,.55) 72%, rgba(14,17,8,.88) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .stage-info{
    position: absolute; bottom: 28px; left: 28px; right: 110px;
    z-index: 3;
    display: flex; align-items: center; gap: 18px;
  }
  .stage-info-icon{
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(245,239,223,.96);
    color: var(--forest);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
  }
  .stage-info-text strong{
    display: block;
    color: var(--bone);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(14,17,8,.75);
  }
  .stage-info-text span{
    display: block;
    color: var(--bone);
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: .05em;
    font-family: var(--font-italic);
    font-style: italic;
    text-shadow: 0 2px 12px rgba(14,17,8,.92);
  }
  .stage-counter{
    position: absolute;
    bottom: 28px; right: 28px;
    z-index: 3;
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 14px;
    letter-spacing: .15em;
    background: rgba(14,17,8,.6);
    backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(242,211,142,.3);
  }
  .stage-counter b{ font-weight: 400; color: var(--bone); }
  .stage-counter span{ color: var(--gold-deep); margin: 0 6px; }

  /* arrows */
  .stage-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(14,17,8,.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(242,211,142,.3);
    color: var(--bone);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 18px;
    transition: all .3s var(--ease);
  }
  .stage-arrow:hover{ background: var(--gold); color: var(--forest); border-color: var(--gold); }
  .stage-arrow.prev{ left: 20px; }
  .stage-arrow.next{ right: 20px; }

  /* thumbnail rail (pill style) */
  .thumb-rail{
    display: flex; flex-direction: column;
    gap: 14px;
    align-content: stretch;
  }
  @media (max-width: 900px){
    .thumb-rail{ flex-direction: row; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
    .thumb-rail::-webkit-scrollbar{ height: 4px; }
    .thumb-rail::-webkit-scrollbar-thumb{ background: var(--gold-deep); }
  }

  .thumb{
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: 1px solid var(--line);
    opacity: .55;
    transition: opacity .4s var(--ease), border-color .4s var(--ease), flex .6s var(--ease), filter .4s var(--ease);
    filter: saturate(.7);
  }
  .thumb::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,17,8,.5));
    pointer-events: none;
  }
  .thumb:hover{ opacity: .85; filter: saturate(.95); }
  .thumb.active{
    opacity: 1;
    filter: none;
    border-color: var(--gold);
    flex: 1.6;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
  }
  .thumb .thumb-label{
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(245,239,223,.95);
    color: var(--forest);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
  }
  @media (max-width: 900px){
    .thumb{ width: 110px; height: 160px; flex: 0 0 110px; }
    .thumb.active{ flex: 0 0 140px; }
  }

  /* Info strip below */
  .info-strip{
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
  }
  @media (max-width: 900px){ .info-strip{ grid-template-columns: 1fr; } }
  .info-block{
    background: var(--paper);
    padding: 36px;
  }
  .info-block .eyebrow{ margin-bottom: 18px; color: var(--gold-deep); }
  .info-block .eyebrow::before{ background: var(--gold-deep); }
  .info-block h4{
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 18px;
    letter-spacing: -.01em;
  }
  .info-block h4 em{ color: var(--gold); }

  /* stats inline */
  .stats-inline{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 12px;
  }
  .stats-inline > div{
    border-left: 1px solid var(--line);
    padding-left: 16px;
  }
  .stats-inline .v{
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--gold);
    line-height: 1;
    font-weight: 300;
    font-variation-settings: "opsz" 96;
  }
  .stats-inline .v small{ font-size: .45em; color: var(--gold-deep); margin-left: 2px; }
  .stats-inline .l{
    font-size: 10px;
    color: var(--gold-deep);
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-top: 8px;
  }

  /* incluso compacta */
  .incluso-compact{
    list-style: none;
    columns: 1;
  }
  .incluso-compact li{
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink);
    opacity: .85;
    display: flex; justify-content: space-between; gap: 12px;
  }
  .incluso-compact li:last-child{ border-bottom: none; }
  .incluso-compact li b{
    font-weight: 400;
    color: var(--forest);
    font-family: var(--font-display);
    font-size: 14px;
  }
  .incluso-compact li em{
    color: var(--gold-deep);
    font-style: normal;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    align-self: center;
  }

  /* celebrações pills */
  .cel-pills{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px;
  }
  .cel-pills span{
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--forest);
    font-weight: 500;
  }
  .cel-pills span.gold{
    background: var(--gold);
    color: var(--forest);
    border-color: var(--gold);
  }
  .quote-mini{
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--ink);
    opacity: .85;
    font-size: 14px;
    line-height: 1.5;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-top: 4px;
  }
  .quote-mini em{ color: var(--gold); }
  .quote-mini cite{
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .25em;
    color: var(--gold-deep);
    text-transform: uppercase;
    font-family: var(--font-body);
  }

  /* ============ DEPOIMENTO ============ */
  .depoimento{
    background:
      linear-gradient(180deg, rgba(49,57,33,.92), rgba(30,35,22,.95)),
      url('assets/vg-bg-04-flowers-cake.webp');
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 180px 40px;
  }
  .depoimento .mark{
    font-family: var(--font-display);
    color: var(--gold-deep);
    font-size: 96px;
    line-height: 1;
    font-style: italic;
    font-variation-settings: "opsz" 144;
  }
  .depoimento blockquote{
    font-family: var(--font-italic);
    font-style: italic;
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.35;
    color: var(--cream);
    max-width: 820px;
    margin: 24px auto 48px;
    font-weight: 400;
  }
  .depoimento blockquote em{ color: var(--gold); font-style: italic; }
  .depoimento .attr{
    font-size: 11px;
    color: var(--gold-deep);
    letter-spacing: .3em;
    text-transform: uppercase;
  }
  .depoimento .attr strong{
    display: block;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: .05em;
    text-transform: none;
    font-weight: 400;
    margin-bottom: 6px;
  }
  .depoimento-nav{
    display: flex; justify-content: center; gap: 12px;
    margin-top: 50px;
  }
  .dep-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid var(--gold-deep);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all .3s var(--ease);
  }
  .dep-dot.active{
    background: var(--gold);
    border-color: var(--gold);
    width: 28px;
    border-radius: 4px;
  }

  /* ============ LOCALIZAÇÃO ============ */
  .localizacao{
    background: var(--bone);
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .loc-grid{
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 900px){ .loc-grid{ grid-template-columns: 1fr; } }
  .loc-grid h2{ color: var(--forest); max-width: 12ch; }
  .loc-grid h2 em{ color: var(--gold); }
  .loc-grid p{ margin-top: 24px; color: var(--ink); opacity: .85; font-size: 16px; }
  .addr-card{
    margin-top: 40px;
    padding: 28px;
    border: 1px solid var(--line-gold);
    background: var(--bone-deep);
    box-shadow: 0 8px 24px rgba(49,57,33,.08);
  }
  .addr-card .k{
    font-size: 10px;
    color: var(--gold-deep);
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .addr-card .v{
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 22px;
    font-weight: 300;
    line-height: 1.4;
  }
  .routes{
    list-style: none;
    margin-top: 28px;
    display: grid;
    gap: 16px;
  }
  .routes li{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 13px;
    color: var(--ink);
    opacity: .85;
  }
  .routes .from{ color: var(--gold); font-family: var(--font-display); font-size: 15px; }
  .routes .time{ font-family: var(--font-display); color: var(--gold); font-size: 15px; }

  /* Fake map — paleta clara, fundo sage/forest claro */
  .map{
    aspect-ratio: 4/3.3;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
      radial-gradient(ellipse at 55% 50%, rgba(91,107,66,.18) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 80%, rgba(184,150,90,.10) 0%, transparent 55%),
      linear-gradient(180deg, #EFE8D6 0%, #E5DCC4 100%);
  }
  .map::before{
    content:"";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(transparent 49.7%, rgba(49,57,33,.07) 50%, transparent 50.3%),
      linear-gradient(90deg, transparent 49.7%, rgba(49,57,33,.07) 50%, transparent 50.3%);
    background-size: 48px 48px;
  }
  /* roads */
  .map svg.roads{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }
  .map .pin{
    position: absolute;
    top: 54%; left: 58%;
    transform: translate(-50%, -100%);
    z-index: 3;
  }
  .map .pin .dot{
    width: 14px; height: 14px;
    background: var(--gold);
    border: 2px solid var(--bone);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(184,150,90,.55);
    animation: pulse 2.5s var(--ease) infinite;
    margin: 0 auto;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(184,150,90,.55); }
    70%{ box-shadow: 0 0 0 20px rgba(184,150,90,0); }
    100%{ box-shadow: 0 0 0 0 rgba(184,150,90,0); }
  }
  .map .pin .stem{
    width: 1px; height: 40px;
    background: linear-gradient(180deg, var(--gold), transparent);
    margin: 0 auto;
  }
  .map .pin-label{
    position: absolute;
    bottom: 100%; left: 50%;
    transform: translateX(-50%);
    background: var(--bone);
    border: 1px solid var(--gold);
    padding: 6px 10px;
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: .2em;
    color: var(--gold);
    margin-bottom: 8px;
    box-shadow: 0 6px 18px rgba(49,57,33,.12);
  }
  /* Os pills têm tamanho fixo em px enquanto o mapa encolhe com a viewport,
     então precisam ser compactos para não colidirem entre si nem com o .pin-label. */
  .map-pill{
    position: absolute;
    font-size: 8px;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: var(--bone);
    border: 1px solid var(--line-gold);
    padding: 7px 10px;
    color: var(--ink);
    box-shadow: 0 8px 22px rgba(49,57,33,.12);
  }
  .map-pill strong{
    display: block;
    color: var(--forest);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .01em;
    text-transform: none;
    font-weight: 400;
    margin-bottom: 2px;
  }
  /* p1 = Tamoios (oeste) · p3 = Rio-Santos (norte) · p2 = Ilhabela (sul).
     p3 fica no alto: em top:30% ele cobria o .pin-label do Villa Garden. */
  .map-pill.p1{ top: 10%; left: 7%; }
  .map-pill.p2{ bottom: 11%; right: 6%; }
  .map-pill.p3{ top: 16%; right: 6%; }
  .map-legend{
    position: absolute;
    bottom: 14px; left: 14px;
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: .8;
  }

  /* ============ AGENDA (FORM) ============ */
  .agenda{
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
      linear-gradient(180deg, rgba(49,57,33,.94), rgba(14,17,8,.96)),
      url('assets/vg-bg-03-lounge-green.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
  }
  .agenda::before{
    content:""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(242,211,142,.08), transparent 50%);
    pointer-events: none;
  }
  .agenda-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    position: relative;
  }
  @media (max-width: 900px){ .agenda-grid{ grid-template-columns: 1fr; gap: 48px; } }
  .agenda h2{ color: var(--cream); max-width: 14ch; }
  .agenda h2 em{ color: var(--gold); }
  .agenda .lede{ margin-top: 28px; color: var(--cream-dim); font-size: 16px; }
  .agenda .micro{
    margin-top: 40px;
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--gold);
    font-size: 20px;
    border-top: 1px solid var(--line);
    padding-top: 32px;
  }
  .wa-link{
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 14px 22px;
    border: 1px solid var(--gold);
    font-weight: 500;
    transition: all .3s var(--ease);
  }
  .wa-link:hover{
    background: rgba(242,211,142,.08);
  }
  .wa-link svg{ width: 16px; height: 16px; }

  /* form */
  .form{
    display: grid; gap: 28px;
    padding: 48px;
    background: rgba(247,243,234,.08);
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
  }
  .field{
    display: grid; gap: 8px;
  }
  .field label{
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 500;
  }
  .field label .hint{
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--gold-faint);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    margin-left: 10px;
  }
  .field input, .field select, .field textarea{
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-strong);
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 300;
    padding: 10px 0;
    outline: none;
    transition: border-color .3s var(--ease);
    width: 100%;
  }
  .field select{
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3 5l4 4 4-4' stroke='%23B8A773' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color: var(--gold);
  }
  .field input::placeholder, .field textarea::placeholder{
    color: var(--gold-faint);
    font-style: italic;
  }
  .field-row{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  @media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }

  .btn-primary, .btn-ghost{
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    padding: 20px 32px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .35em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--gold);
    transition: all .4s var(--ease);
    cursor: pointer;
  }
  .btn-primary{
    background: var(--gold);
    color: var(--forest);
  }
  .btn-primary:hover{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--forest);
    letter-spacing: .4em;
  }
  .btn-ghost{
    background: transparent;
    color: var(--gold);
  }
  .btn-ghost:hover{
    background: rgba(242,211,142,.08);
  }

  .form-success{
    display: none;
    text-align: center;
    padding: 48px 32px;
  }
  .form-success.show{ display: block; }
  .form-success .ok{
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 16px;
  }
  .form-success p{
    color: var(--bone);
    opacity: .85;
    margin: 0 auto;
  }

  /* ============ FOOTER ============ */
  .footer{
    background: var(--bone-deep);
    padding: 100px 0 40px;
    border-top: 1px solid var(--line);
  }
  .footer-grid{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 820px){
    .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
  }
  .footer-brand{
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 36px;
    color: var(--gold);
    font-weight: 300;
    line-height: 1;
  }
  .footer-brand em{
    display: block;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 15px;
    color: var(--gold-deep);
    margin-top: 14px;
    max-width: 32ch;
  }
  .footer h5{
    font-size: 10px;
    color: var(--gold);
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .footer ul{ list-style: none; }
  .footer li{
    font-size: 13px;
    color: var(--ink);
    opacity: .8;
    padding: 6px 0;
  }
  .footer li a{ color: var(--ink); opacity: .85; transition: color .3s var(--ease); }
  .footer li a:hover{ color: var(--gold); }
  .footer-meta{
    margin-top: 40px;
    color: var(--ink);
    opacity: .7;
    display: flex; justify-content: space-between;
    font-size: 10px;
    color: var(--gold-faint);
    letter-spacing: .3em;
    text-transform: uppercase;
    flex-wrap: wrap; gap: 16px;
  }

  /* ============ TESTEMUNHOS — bento assimétrico ============ */
  .testemunhos{
    background: var(--bone);
    padding: 110px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .testemunhos .test-head{
    max-width: 920px;
    margin: 0 auto 70px;
    padding: 0 40px;
    text-align: center;
  }
  .testemunhos .test-head .eyebrow{
    justify-content: center;
    display: inline-flex;
  }
  .testemunhos .test-head h2{
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 18px 0 24px;
  }
  .testemunhos .test-head h2 em{
    font-style: italic; color: var(--gold);
  }
  .testemunhos .test-lede{
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    opacity: .68;
    max-width: 620px;
    margin: 0 auto;
  }

  /* === Bento 12-col grid === */
  .bento-grid{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
  }
  .bento-q-big{ grid-column: 1 / 8; grid-row: 1; }
  .bento-photo-quote{ grid-column: 8 / 13; grid-row: 1; }
  .bento-pill:nth-of-type(3){ grid-column: 1 / 5; grid-row: 2; }
  .bento-pill:nth-of-type(4){ grid-column: 5 / 9; grid-row: 2; }
  .bento-pill:nth-of-type(5){ grid-column: 9 / 13; grid-row: 2; }

  /* === Card base === */
  .bento-card{
    position: relative;
    background: var(--bone-deep);
    border: 1px solid rgba(168,150,114,.22);
    border-radius: 4px;
    padding: 38px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform .6s var(--ease), border-color .6s var(--ease);
  }
  .bento-card:hover{
    border-color: rgba(168,150,114,.45);
  }

  /* === Corner brackets (the "L" marks) === */
  .bento-corner{
    position: absolute;
    width: 14px; height: 14px;
    pointer-events: none;
    opacity: .55;
  }
  .bento-corner::before,
  .bento-corner::after{
    content: "";
    position: absolute;
    background: var(--gold-deep);
  }
  .bento-corner::before{ width: 100%; height: 1px; }
  .bento-corner::after{ width: 1px; height: 100%; }
  .bc-tl{ top: 10px; left: 10px; }
  .bc-tl::before{ top: 0; left: 0; }
  .bc-tl::after{ top: 0; left: 0; }
  .bc-tr{ top: 10px; right: 10px; }
  .bc-tr::before{ top: 0; right: 0; }
  .bc-tr::after{ top: 0; right: 0; }
  .bc-bl{ bottom: 10px; left: 10px; }
  .bc-bl::before{ bottom: 0; left: 0; }
  .bc-bl::after{ bottom: 0; left: 0; }
  .bc-br{ bottom: 10px; right: 10px; }
  .bc-br::before{ bottom: 0; right: 0; }
  .bc-br::after{ bottom: 0; right: 0; }

  /* === BIG QUOTE === */
  .bento-q-big{
    min-height: 360px;
    justify-content: space-between;
    padding: 56px 56px 40px;
  }
  .bento-mark{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 90px;
    line-height: .6;
    color: var(--gold);
    margin: 0 0 -14px;
    align-self: flex-start;
  }
  .bento-body{
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 30px;
    line-height: 1.28;
    color: var(--ink);
    letter-spacing: -.01em;
    text-wrap: pretty;
    margin: 0;
    flex: 1;
  }
  .bento-body em{
    font-style: italic; color: var(--gold-deep);
  }
  .bento-foot{
    display: flex; align-items: center; gap: 14px;
    padding-top: 22px;
    border-top: 1px solid rgba(168,150,114,.25);
  }
  .bento-avatar{
    width: 44px; height: 44px;
    border-radius: 50%;
    background-size: cover; background-position: center;
    flex-shrink: 0;
    border: 1px solid var(--line-gold);
  }
  .bento-who strong{
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .bento-who span{
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    opacity: .85;
  }

  /* === PHOTO + QUOTE OVERLAY === */
  .bento-photo-quote{
    min-height: 360px;
    background-size: cover;
    background-position: center;
    padding: 0;
    border: none;
    color: var(--bone);
    overflow: hidden;
  }
  .bento-photo-quote::before{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(28,30,28,.15) 0%, rgba(28,30,28,.55) 60%, rgba(28,30,28,.78) 100%);
    pointer-events: none;
  }
  .bento-photo-quote .bento-corner{ z-index: 2; }
  .bento-photo-quote .bento-corner::before,
  .bento-photo-quote .bento-corner::after{ background: var(--gold); opacity: .9; }
  .photo-quote{
    position: absolute;
    bottom: 32px;
    left: 36px;
    right: 36px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .photo-quote p{
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: 22px;
    line-height: 1.25;
    color: var(--bone);
    margin: 0;
    letter-spacing: -.005em;
  }
  .photo-quote p em{
    color: var(--gold);
    font-style: italic;
  }
  .photo-meta{
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--bone);
    opacity: .7;
  }

  /* === SMALL QUOTE PILLS === */
  .bento-pill{
    padding: 32px 30px 26px;
    gap: 18px;
    min-height: 240px;
  }
  .bento-mark-sm{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 44px;
    line-height: .55;
    color: var(--gold);
    align-self: flex-start;
    margin: 0 0 -8px;
  }
  .bento-body-sm{
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.005em;
    text-wrap: pretty;
    flex: 1;
  }
  .bento-body-sm em{
    font-style: italic; color: var(--gold-deep);
  }
  .bento-foot-mini{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(168,150,114,.22);
  }
  .bento-avatar-sm{
    width: 36px; height: 36px;
    border-radius: 50%;
    background-size: cover; background-position: center;
    flex-shrink: 0;
    border: 1px solid var(--line-gold);
  }
  .bento-foot-mini strong{
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: var(--ink);
    letter-spacing: -.005em;
    margin-bottom: 3px;
  }
  .bento-foot-mini span{
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    opacity: .85;
  }

  /* === FOREST PILL — dark green variant === */
  .bento-forest{
    background: var(--forest);
    border-color: transparent;
  }
  .bento-forest .bento-mark-sm{ color: var(--gold); opacity: .8; }
  .bento-forest .bento-body-sm{ color: var(--bone); }
  .bento-forest .bento-body-sm em{ color: var(--gold); }
  .bento-forest .bento-foot-mini{ border-top-color: rgba(247,243,234,.18); }
  .bento-forest .bento-foot-mini strong{ color: var(--bone); }
  .bento-forest .bento-foot-mini span{ color: var(--bone); opacity: .65; }
  .bento-forest .bento-avatar-sm{ border-color: rgba(247,243,234,.3); }
  .bento-forest .bento-corner::before,
  .bento-forest .bento-corner::after{ background: var(--gold); opacity: .9; }

  /* === Reveal stagger === */
  .bento-grid .reveal:nth-child(1){ transition-delay: 0s; }
  .bento-grid .reveal:nth-child(2){ transition-delay: .08s; }
  .bento-grid .reveal:nth-child(3){ transition-delay: .16s; }
  .bento-grid .reveal:nth-child(4){ transition-delay: .22s; }
  .bento-grid .reveal:nth-child(5){ transition-delay: .28s; }

  /* === Tablet === */
  @media (max-width: 1024px){
    .bento-grid{
      grid-template-columns: repeat(6, 1fr);
      gap: 18px;
    }
    .bento-q-big{ grid-column: 1 / 7; grid-row: 1; min-height: 280px; padding: 44px 36px 32px; }
    .bento-photo-quote{ grid-column: 1 / 7; grid-row: 2; min-height: 280px; }
    .bento-pill:nth-of-type(3){ grid-column: 1 / 3; grid-row: 3; }
    .bento-pill:nth-of-type(4){ grid-column: 3 / 5; grid-row: 3; }
    .bento-pill:nth-of-type(5){ grid-column: 5 / 7; grid-row: 3; }
    .bento-body{ font-size: 24px; }
  }

  /* === Mobile === */
  @media (max-width: 760px){
    .testemunhos{ padding: 70px 0; }
    .testemunhos .test-head{ padding: 0 24px; margin-bottom: 50px; }
    .bento-grid{
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 0 20px;
    }
    .bento-q-big,
    .bento-photo-quote,
    .bento-pill:nth-of-type(3),
    .bento-pill:nth-of-type(4),
    .bento-pill:nth-of-type(5){
      grid-column: 1 / 2;
      grid-row: auto;
    }
    .bento-q-big{ padding: 36px 26px 26px; min-height: 0; }
    .bento-body{ font-size: 20px; }
    .bento-photo-quote{ min-height: 320px; }
    .bento-pill{ padding: 28px 24px 22px; min-height: 0; }
    .photo-quote p{ font-size: 18px; }
    .bento-mark{ font-size: 70px; }
  }


  /* ============ GLOBAL: títulos de section nunca quebram em desktop ============
     Só para os títulos curtos no estilo original ("A sua data — ainda está aberta.").
     Títulos longos de frase inteira ficam de fora: com nowrap eles estouram a coluna
     e montam por cima do eyebrow/lede. Cada seção cuida da própria quebra. */
  @media (min-width: 901px){
    .cel-head h2,
    .loc-grid h2,
    .agenda h2{
      white-space: nowrap;
      max-width: none;
      font-size: clamp(36px, 4.5vw, 72px);
    }
  }
  .event-types, .portfolio-trio, .portfolio-strip,
  .gallery-sec, .testemunhos, .localizacao, .agenda{
    overflow-x: clip;
  }

  /* ============ REVEAL ============ */
  .reveal{ opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .reveal.in{ opacity: 1; transform: translateY(0); }

  /* accessibility: reduced motion */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }

  /* ============================================================
     LIGHT HERO VARIANTS — controlled by body[data-hero-style]
     "dark"      → original dark cinematic (default)
     "paper"     → off-white papel, tipografia gigante, foto interna
     "split"     → dividido bone | foto livre (sem overlay)
     "botanical" → bone com strip vertical de fotos pequenas
     "archway"   → arco grande emoldurando foto, texto em volta
     ============================================================ */

  /* === SHARED reset for any LIGHT variant — overrides dark hero === */
  body[data-hero-style="paper"] .hero,
  body[data-hero-style="split"] .hero,
  body[data-hero-style="botanical"] .hero,
  body[data-hero-style="archway"] .hero{
    background: var(--bone);
  }
  body[data-hero-style="paper"] .hero-bgimg,
  body[data-hero-style="split"] .hero-bgimg,
  body[data-hero-style="botanical"] .hero-bgimg,
  body[data-hero-style="archway"] .hero-bgimg{
    display: none !important;
  }
  body[data-hero-style="paper"] .hero h1,
  body[data-hero-style="split"] .hero h1,
  body[data-hero-style="botanical"] .hero h1,
  body[data-hero-style="archway"] .hero h1{
    color: var(--forest) !important;
    text-shadow: none !important;
  }
  body[data-hero-style="paper"] .hero h1 em,
  body[data-hero-style="split"] .hero h1 em,
  body[data-hero-style="botanical"] .hero h1 em,
  body[data-hero-style="archway"] .hero h1 em{
    color: var(--gold) !important;
  }
  body[data-hero-style="paper"] .hero-lede,
  body[data-hero-style="split"] .hero-lede,
  body[data-hero-style="botanical"] .hero-lede,
  body[data-hero-style="archway"] .hero-lede{
    color: var(--ink) !important;
    opacity: .82;
    text-shadow: none !important;
  }
  body[data-hero-style="paper"] .hero-meta,
  body[data-hero-style="split"] .hero-meta,
  body[data-hero-style="botanical"] .hero-meta,
  body[data-hero-style="archway"] .hero-meta{
    background: var(--bone-deep) !important;
    backdrop-filter: none !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line);
  }
  body[data-hero-style="paper"] .hero-meta .m-item,
  body[data-hero-style="split"] .hero-meta .m-item,
  body[data-hero-style="botanical"] .hero-meta .m-item,
  body[data-hero-style="archway"] .hero-meta .m-item{
    border-right-color: var(--line) !important;
  }
  body[data-hero-style="paper"] .hero-meta .m-v,
  body[data-hero-style="split"] .hero-meta .m-v,
  body[data-hero-style="botanical"] .hero-meta .m-v,
  body[data-hero-style="archway"] .hero-meta .m-v{
    color: var(--forest) !important;
  }
  body[data-hero-style="paper"] .hero-meta .m-k,
  body[data-hero-style="split"] .hero-meta .m-k,
  body[data-hero-style="botanical"] .hero-meta .m-k,
  body[data-hero-style="archway"] .hero-meta .m-k,
  body[data-hero-style="paper"] .hero-meta .m-v small,
  body[data-hero-style="split"] .hero-meta .m-v small,
  body[data-hero-style="botanical"] .hero-meta .m-v small,
  body[data-hero-style="archway"] .hero-meta .m-v small{
    color: var(--gold) !important;
  }
  /* CTA buttons on light hero */
  body[data-hero-style="paper"] .hero-cta,
  body[data-hero-style="split"] .hero-cta,
  body[data-hero-style="botanical"] .hero-cta,
  body[data-hero-style="archway"] .hero-cta{
    background: var(--forest) !important;
    color: var(--bone) !important;
    border-color: var(--forest) !important;
  }
  body[data-hero-style="paper"] .hero-cta:hover,
  body[data-hero-style="split"] .hero-cta:hover,
  body[data-hero-style="botanical"] .hero-cta:hover,
  body[data-hero-style="archway"] .hero-cta:hover{
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--bone) !important;
  }
  body[data-hero-style="paper"] .hero-cta-ghost,
  body[data-hero-style="split"] .hero-cta-ghost,
  body[data-hero-style="botanical"] .hero-cta-ghost,
  body[data-hero-style="archway"] .hero-cta-ghost{
    color: var(--forest) !important;
    border-color: var(--forest) !important;
  }
  body[data-hero-style="paper"] .hero-cta-ghost:hover,
  body[data-hero-style="split"] .hero-cta-ghost:hover,
  body[data-hero-style="botanical"] .hero-cta-ghost:hover,
  body[data-hero-style="archway"] .hero-cta-ghost:hover{
    background: var(--bone-deep) !important;
  }
  body[data-hero-style="paper"] .eyebrow,
  body[data-hero-style="split"] .eyebrow,
  body[data-hero-style="botanical"] .eyebrow,
  body[data-hero-style="archway"] .eyebrow{
    text-shadow: none !important;
    color: var(--gold) !important;
  }
  /* NAV adjustments — on light hero, force forest text from start */
  body[data-hero-style="paper"] .nav,
  body[data-hero-style="split"] .nav,
  body[data-hero-style="botanical"] .nav,
  body[data-hero-style="archway"] .nav{
    color: var(--forest);
    text-shadow: none;
  }
  body[data-hero-style="paper"] .nav-brand,
  body[data-hero-style="split"] .nav-brand,
  body[data-hero-style="botanical"] .nav-brand,
  body[data-hero-style="archway"] .nav-brand{
    color: var(--forest);
    text-shadow: none;
  }
  body[data-hero-style="paper"] .nav-brand em,
  body[data-hero-style="split"] .nav-brand em,
  body[data-hero-style="botanical"] .nav-brand em,
  body[data-hero-style="archway"] .nav-brand em{
    color: var(--gold);
  }
  body[data-hero-style="paper"] .nav-links a,
  body[data-hero-style="split"] .nav-links a,
  body[data-hero-style="botanical"] .nav-links a,
  body[data-hero-style="archway"] .nav-links a{
    color: var(--forest);
    text-shadow: none;
  }
  body[data-hero-style="paper"] .nav-cta,
  body[data-hero-style="split"] .nav-cta,
  body[data-hero-style="botanical"] .nav-cta,
  body[data-hero-style="archway"] .nav-cta{
    color: var(--forest);
    border-color: var(--forest);
    text-shadow: none;
  }
  /* portal adjustments for light heroes */
  body[data-hero-style="paper"] .hero-portal .arch-outer,
  body[data-hero-style="split"] .hero-portal .arch-outer,
  body[data-hero-style="botanical"] .hero-portal .arch-outer,
  body[data-hero-style="archway"] .hero-portal .arch-outer{
    background: var(--bone-deep);
    border-color: var(--gold);
    box-shadow: 0 30px 80px rgba(49,57,33,.18);
  }
  body[data-hero-style="paper"] .hero-portal .arch-outer img,
  body[data-hero-style="split"] .hero-portal .arch-outer img,
  body[data-hero-style="botanical"] .hero-portal .arch-outer img,
  body[data-hero-style="archway"] .hero-portal .arch-outer img{
    filter: none;
  }
  body[data-hero-style="paper"] .hero-portal .arch-outer::after,
  body[data-hero-style="split"] .hero-portal .arch-outer::after,
  body[data-hero-style="botanical"] .hero-portal .arch-outer::after,
  body[data-hero-style="archway"] .hero-portal .arch-outer::after{
    background: linear-gradient(180deg, transparent 65%, rgba(247,243,234,.4));
  }
  body[data-hero-style="paper"] .hero-portal .arch-inner,
  body[data-hero-style="split"] .hero-portal .arch-inner,
  body[data-hero-style="botanical"] .hero-portal .arch-inner,
  body[data-hero-style="archway"] .hero-portal .arch-inner{
    border-color: rgba(184,150,90,.35);
  }
  body[data-hero-style="paper"] .hero-portal .caption em,
  body[data-hero-style="split"] .hero-portal .caption em,
  body[data-hero-style="botanical"] .hero-portal .caption em,
  body[data-hero-style="archway"] .hero-portal .caption em{
    color: var(--gold);
    text-shadow: 0 1px 4px rgba(247,243,234,.8);
  }
  /* hero-overlay-arch (the floating decorative arch with badge) */
  body[data-hero-style="paper"] .hero-overlay-arch,
  body[data-hero-style="split"] .hero-overlay-arch,
  body[data-hero-style="botanical"] .hero-overlay-arch,
  body[data-hero-style="archway"] .hero-overlay-arch{
    border-color: var(--gold) !important;
  }
  body[data-hero-style="paper"] .hero-overlay-arch .badge,
  body[data-hero-style="split"] .hero-overlay-arch .badge,
  body[data-hero-style="botanical"] .hero-overlay-arch .badge,
  body[data-hero-style="archway"] .hero-overlay-arch .badge{
    background: var(--bone) !important;
    color: var(--gold) !important;
    border: 1px solid var(--gold);
  }

  /* ===== VARIANT 1 · PAPER (centered editorial poster) ===== */
  body[data-hero-style="paper"] .hero{
    min-height: 100vh;
    padding: 160px 40px 60px;
    align-items: center;
  }
  body[data-hero-style="paper"] .hero .wrap{
    grid-template-columns: 1fr !important;
    text-align: center;
    max-width: 980px;
    gap: 40px !important;
  }
  body[data-hero-style="paper"] .hero h1{
    font-size: clamp(64px, 11vw, 180px) !important;
    line-height: .92 !important;
  }
  body[data-hero-style="paper"] .hero-lede{
    margin: 0 auto !important;
    text-align: center;
    max-width: 56ch;
  }
  body[data-hero-style="paper"] .hero-actions{ justify-content: center; }
  body[data-hero-style="paper"] .hero-portal{
    display: none;
  }
  body[data-hero-style="paper"] .hero-overlay-arch{
    display: block !important;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(820px, 88vw); height: min(820px, 88vw);
    border: 1px solid var(--line-gold) !important;
    border-radius: 50% 50% 8% 8% / 35% 35% 4% 4%;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
  }
  body[data-hero-style="paper"] .hero-overlay-arch .badge{
    display: none;
  }
  body[data-hero-style="paper"] .hero .wrap > div{ position: relative; z-index: 2; }

  /* ===== VARIANT 2 · SPLIT-LIGHT (two columns, no overlay) ===== */
  body[data-hero-style="split"] .hero{
    padding: 160px 0 0 !important;
    min-height: 100vh;
  }
  body[data-hero-style="split"] .hero .wrap{
    grid-template-columns: 1.05fr .95fr !important;
    gap: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    align-items: stretch;
  }
  body[data-hero-style="split"] .hero .wrap > div:first-child{
    padding: 60px clamp(40px, 6vw, 100px) 80px;
    display: flex; flex-direction: column; justify-content: center;
  }
  body[data-hero-style="split"] .hero h1{
    font-size: clamp(48px, 7vw, 110px) !important;
    text-align: left;
  }
  body[data-hero-style="split"] .hero h1 .line{ text-align: left; }
  body[data-hero-style="split"] .hero-lede{
    margin: 32px 0 0 !important;
  }
  body[data-hero-style="split"] .hero-actions{ justify-content: flex-start; }
  body[data-hero-style="split"] .hero .eyebrow{ justify-content: flex-start !important; display: inline-flex !important; }
  body[data-hero-style="split"] .hero-portal{
    display: block !important;
    aspect-ratio: auto !important;
    height: 100vh;
    max-height: none;
  }
  body[data-hero-style="split"] .hero-portal .arch-outer{
    border-radius: 0 !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(49,57,33,.15), rgba(49,57,33,.45)),
      url('assets/vg-bg-01-lawn-palms.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    border: none !important;
    box-shadow: none !important;
  }
  body[data-hero-style="split"] .hero-portal .arch-outer img,
  body[data-hero-style="split"] .hero-portal .arch-inner,
  body[data-hero-style="split"] .hero-portal .arch-outer::after,
  body[data-hero-style="split"] .hero-portal .caption{
    display: none !important;
  }
  body[data-hero-style="split"] .hero-meta{
    margin: 0 !important;
    grid-column: 1 / -1;
  }
  body[data-hero-style="split"] .hero-overlay-arch{ display: none !important; }
  body[data-hero-style="split"] .scroll-hint{ left: clamp(40px, 6vw, 100px) !important; }
  @media (max-width: 900px){
    body[data-hero-style="split"] .hero .wrap{ grid-template-columns: 1fr !important; }
    body[data-hero-style="split"] .hero-portal{ height: 60vh; }
  }

  /* ===== VARIANT 3 · BOTANICAL (text + vertical photo strip) ===== */
  body[data-hero-style="botanical"] .hero{
    padding: 160px 40px 60px;
    min-height: 100vh;
  }
  body[data-hero-style="botanical"] .hero .wrap{
    grid-template-columns: 1.4fr 1fr !important;
    gap: 80px !important;
    max-width: 1280px;
    align-items: center;
  }
  body[data-hero-style="botanical"] .hero h1{
    font-size: clamp(54px, 8vw, 130px) !important;
    text-align: left;
  }
  body[data-hero-style="botanical"] .hero h1 .line{ text-align: left; }
  body[data-hero-style="botanical"] .hero-lede{ margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
  body[data-hero-style="botanical"] .hero-actions{ justify-content: flex-start; }
  body[data-hero-style="botanical"] .hero .eyebrow{ display: inline-flex !important; }
  body[data-hero-style="botanical"] .hero-portal{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.4fr 1fr 1.2fr;
    gap: 10px;
    aspect-ratio: auto !important;
    height: 70vh;
    max-height: 720px;
  }
  body[data-hero-style="botanical"] .hero-portal::before{
    content: "";
    grid-column: 1; grid-row: 1;
    background: linear-gradient(180deg, rgba(49,57,33,.1), rgba(49,57,33,.35)),
      url('assets/vg-bg-01-lawn-palms.webp');
    background-size: cover; background-position: center;
  }
  body[data-hero-style="botanical"] .hero-portal::after{
    content: "";
    grid-column: 2; grid-row: 1 / 3;
    background: linear-gradient(180deg, rgba(49,57,33,.1), rgba(49,57,33,.35)),
      url('assets/vg-bg-04-flowers-cake.webp');
    background-size: cover; background-position: center;
  }
  body[data-hero-style="botanical"] .hero-portal .arch-outer{
    grid-column: 1 / -1; grid-row: 3;
    position: relative !important;
    inset: auto !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(49,57,33,.1), rgba(49,57,33,.4)),
      url('assets/vg-bg-06-table-view.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    border: none !important;
    box-shadow: none !important;
  }
  body[data-hero-style="botanical"] .hero-portal .arch-outer > *,
  body[data-hero-style="botanical"] .hero-portal .arch-inner,
  body[data-hero-style="botanical"] .hero-portal .arch-outer::after,
  body[data-hero-style="botanical"] .hero-portal .caption{
    display: none !important;
  }
  body[data-hero-style="botanical"] .hero-portal .arch-outer img{ display: none !important; }
  body[data-hero-style="botanical"] .hero-overlay-arch{ display: none !important; }
  @media (max-width: 900px){
    body[data-hero-style="botanical"] .hero .wrap{ grid-template-columns: 1fr !important; gap: 40px !important; }
    body[data-hero-style="botanical"] .hero-portal{ height: 50vh; }
  }

  /* ===== VARIANT 4 · ARCHWAY (big arch frames small photo, type wraps around) ===== */
  body[data-hero-style="archway"] .hero{
    padding: 160px 40px 60px;
    min-height: 100vh;
    text-align: center;
  }
  body[data-hero-style="archway"] .hero .wrap{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    max-width: 1100px;
  }
  body[data-hero-style="archway"] .hero .wrap > div{
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    justify-items: center;
    gap: 20px;
  }
  body[data-hero-style="archway"] .hero .eyebrow{ display: inline-flex !important; justify-content: center !important; order: 1; }
  body[data-hero-style="archway"] .hero h1{
    order: 2;
    font-size: clamp(56px, 9vw, 130px) !important;
    text-align: center;
  }
  /* insert an arch+photo decoration between H1 and lede */
  body[data-hero-style="archway"] .hero h1::after{
    content: "";
    display: block;
    width: clamp(180px, 28vw, 320px);
    height: clamp(220px, 34vw, 400px);
    margin: 30px auto 10px;
    border: 1.5px solid var(--gold);
    border-radius: 50% 50% 6% 6% / 40% 40% 3% 3%;
    background: linear-gradient(180deg, rgba(49,57,33,.1), rgba(49,57,33,.45)),
      url('assets/vg-bg-04-flowers-cake.webp');
    background-size: cover; background-position: center;
    box-shadow: 0 30px 60px rgba(49,57,33,.2);
  }
  body[data-hero-style="archway"] .hero-lede{ order: 3; margin: 0 auto !important; text-align: center; }
  body[data-hero-style="archway"] .hero-actions{ order: 4; justify-content: center; }
  body[data-hero-style="archway"] .hero-meta{ order: 5; }
  body[data-hero-style="archway"] .hero-portal{ display: none !important; }
  body[data-hero-style="archway"] .hero-overlay-arch{ display: none !important; }

  /* accent variant */
  body[data-accent="cream"]{
    --gold: #F5EFDF;
    --gold-deep: #D9D1BA;
  }

  /* ============================================================
     MOBILE PASS — comprehensive responsive fixes
     ============================================================ */

  /* Tablet (≤ 1024) — tighten paddings */
  @media (max-width: 1024px){
    .wrap{ padding: 0 28px; }
    .gallery-sec, .depoimento{ padding-left: 28px; padding-right: 28px; }
    section{ padding: 110px 0; }
  }

  /* Mobile (≤ 760) — full restack */
  @media (max-width: 760px){
    :root{ --max: 100%; }

    body{ font-size: 15px; }

    /* paddings */
    .wrap{ padding: 0 22px; }
    section{ padding: 80px 0; }
    .gallery-sec{ padding: 90px 22px 80px; }
    .depoimento{ padding: 110px 22px; }

    /* typography downscale */
    h1{ font-size: clamp(44px, 12vw, 64px) !important; }
    h2{ font-size: clamp(32px, 8vw, 44px) !important; line-height: 1.05; }
    h3{ font-size: 22px; }

    /* ===== NAV ===== */
    .nav{ padding: 14px 18px !important; }
    .nav-brand{ font-size: 16px; }
    .nav-brand em{ font-size: 8px; }
    .nav-brand-mark{ height: 18px; }
    .nav-cta{ padding: 10px 16px; font-size: 10px; letter-spacing: .15em; }

    /* ===== HERO ===== */
    .hero{ min-height: auto; padding: 110px 0 60px; }
    .hero .wrap{
      grid-template-columns: 1fr !important;
      gap: 32px !important;
      padding: 0 22px;
    }
    .hero-portal{
      max-width: 280px;
      margin: 0 auto;
      aspect-ratio: 3/4;
    }
    .hero-portal .caption{ bottom: 18px; }
    .hero-portal .caption em{ font-size: 16px; }
    .hero h1{ letter-spacing: -.02em; }
    .hero-lede{ font-size: 14px; max-width: 100%; padding: 0; }
    .hero-overlay-arch{ display: none; } /* arch competes with restacked hero */

    /* === MOBILE FIX: paper variant — proper portal arch sized to hero content === */
    body[data-hero-style="paper"] .hero-overlay-arch{
      display: block !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 78vw !important;
      height: auto !important;
      aspect-ratio: 3 / 4.4 !important;
      max-height: 78vh !important;
      border-radius: 50% 50% 8% 8% / 30% 30% 4% 4% !important;
      border: 1px solid var(--gold) !important;
      opacity: .7 !important;
      z-index: 0 !important;
      pointer-events: none;
    }
    body[data-hero-style="paper"] .hero-overlay-arch::before{
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(184,150,90,.28);
      border-radius: inherit;
    }
    /* keep all hero content above the arch */
    body[data-hero-style="paper"] .hero .wrap > div > *{
      position: relative; z-index: 2;
    }
    /* hero-meta on paper mobile — sit OUTSIDE the arch, full-width edge to edge */
    body[data-hero-style="paper"] .hero-meta{
      position: relative; z-index: 3;
      margin-left: -22px !important;
      margin-right: -22px !important;
      margin-top: 48px !important;
      max-width: none !important;
      width: calc(100% + 44px) !important;
    }

    /* hero CTAs */
    .hero-cta, .hero-cta-ghost, .btn-primary, .btn-ghost{
      padding: 14px 22px !important;
      font-size: 11px !important;
      letter-spacing: .15em;
    }
    /* meta strip — collapse to 2 cols, smaller */
    .hero-meta{
      grid-template-columns: repeat(2, 1fr) !important;
      margin-top: 36px;
    }
    .hero-meta .m-item{ padding: 16px 10px; }
    .hero-meta .m-item:nth-child(2n){ border-right: none; }
    .hero-meta .m-item:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
    .hero-meta .m-v{ font-size: 18px; }
    .hero-meta .m-k{ font-size: 9px; letter-spacing: .2em; }

    /* ===== ESPAÇO ===== */
    .espaco-grid{ gap: 40px !important; }
    .espaco-grid p{ font-size: 15px; margin-top: 20px; }

    /* ===== CELEBRAÇÕES ===== */
    .cel-head{ flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 40px; }
    .cel-grid{ gap: 14px; }
    .cel-card{ aspect-ratio: 3/3.6; }
    .cel-card h3{ font-size: 24px; }
    .cel-card .info{ bottom: 22px; left: 18px; right: 18px; }

    /* ===== INCLUSO ===== */
    .incluso-wrap{ gap: 36px !important; }
    .incluso .lede{ font-size: 14px; }
    .incluso-list .t{ font-size: 18px; }
    .incluso-list .n{ font-size: 18px; }
    .incluso-list li{
      grid-template-columns: 32px 1fr !important;
      padding: 18px 0 !important;
      gap: 12px;
    }
    .incluso-list li:hover{ padding-left: 0 !important; }
    .incluso-list .d{ grid-column: 2 !important; margin-top: 4px; font-size: 11px; }

    /* ===== GALLERY SHOWCASE ===== */
    .gal-head{ grid-template-columns: 1fr !important; gap: 18px; margin-bottom: 32px; }
    .gal-head h2{ font-size: clamp(34px, 8vw, 48px) !important; }
    .gal-lede{ font-size: 14px; }

    .showcase{ grid-template-columns: 1fr !important; height: auto !important; gap: 14px; }
    .stage{ aspect-ratio: 4/5; border-radius: 22px; }
    .stage-info{ left: 18px; right: 90px; bottom: 18px; gap: 12px; }
    .stage-info-icon{ width: 40px; height: 40px; font-size: 12px; }
    .stage-info-text strong{ font-size: 17px; }
    .stage-info-text span{ font-size: 11px; }
    .stage-counter{ bottom: 18px; right: 18px; font-size: 12px; padding: 6px 10px; }
    .stage-arrow{ width: 38px; height: 38px; font-size: 16px; }
    .stage-arrow.prev{ left: 12px; }
    .stage-arrow.next{ right: 12px; }

    .thumb-rail{
      flex-direction: row !important;
      overflow-x: auto;
      gap: 10px;
      padding: 4px 2px 8px;
      -webkit-overflow-scrolling: touch;
    }
    .thumb{
      width: 64px !important;
      height: 96px !important;
      flex: 0 0 64px !important;
      border-radius: 999px;
    }
    .thumb.active{ flex: 0 0 80px !important; width: 80px !important; }
    .thumb .thumb-label{ width: 26px; height: 26px; font-size: 10px; bottom: 8px; }

    /* info strip stacks */
    .info-strip{ grid-template-columns: 1fr !important; margin-top: 50px; border-radius: 14px; }
    .info-block{ padding: 28px 22px; }
    .info-block h4{ font-size: 22px; margin-bottom: 14px; }
    .stats-inline{ gap: 18px 10px; }
    .stats-inline .v{ font-size: 28px; }
    .incluso-compact li{ font-size: 12px; }
    .incluso-compact li b{ font-size: 13px; }
    .incluso-compact li em{ font-size: 9px; letter-spacing: .15em; }
    .cel-pills{ gap: 6px; }
    .cel-pills span{ font-size: 10px; padding: 6px 10px; letter-spacing: .1em; }
    .quote-mini{ font-size: 13px; }

    /* ===== DEPOIMENTO ===== */
    .depoimento blockquote{ font-size: clamp(20px, 5.6vw, 26px) !important; line-height: 1.4; }
    .depoimento .mark{ font-size: 80px; }

    /* ===== LOCALIZAÇÃO ===== */
    .loc-grid{ grid-template-columns: 1fr !important; gap: 36px !important; }
    .loc-grid p{ font-size: 14px; }

    /* ===== AGENDA ===== */
    .agenda-grid{ grid-template-columns: 1fr !important; gap: 36px !important; }
    .agenda .lede{ font-size: 14px; }
    .field-row{ grid-template-columns: 1fr !important; gap: 18px !important; }
    input, textarea, select{ font-size: 16px !important; } /* prevent iOS zoom */

    /* ===== FOOTER ===== */
    .footer-grid{ grid-template-columns: 1fr !important; gap: 32px !important; }
    .footer-bottom{ flex-direction: column; gap: 12px; text-align: center; }

    /* eyebrow tighter on mobile */
    .eyebrow{ font-size: 10px; letter-spacing: .25em; }

  }

  /* Very small phones (≤ 380) */
  @media (max-width: 380px){
    .wrap{ padding: 0 16px; }
    h1{ font-size: 40px !important; }
    h2{ font-size: 28px !important; }
    .hero-meta{ grid-template-columns: 1fr 1fr; }
    .hero-meta .m-v{ font-size: 16px; }
    .nav{ padding: 12px 14px !important; }
    .nav-cta{ padding: 9px 12px; font-size: 9.5px; }
  }

  /* ============================================================
     PORTFOLIO MOMENTS — strips e mosaicos ao longo do site
     ============================================================ */

  /* MOMENT 1 — strip cinematográfica horizontal (entre Hero e Galeria) */
  .portfolio-strip{
    background: var(--bone);
    padding: 100px 0 80px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .portfolio-strip .strip-head{
    max-width: 1280px;
    /* 16px + os 34px de padding-top da rail = os 50px originais */
    margin: 0 auto 16px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 40px;
  }
  .portfolio-strip .strip-eyebrow{
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex; align-items: center; gap: 14px;
  }
  .portfolio-strip .strip-eyebrow::before{
    content: ""; width: 32px; height: 1px; background: var(--gold);
  }
  .portfolio-strip .strip-title{
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1;
    color: var(--forest);
    letter-spacing: -.01em;
    margin: 0;
  }
  .portfolio-strip .strip-title em{
    font-style: italic; color: var(--gold);
  }
  .portfolio-strip .strip-meta{
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--ink); opacity: .55;
    text-align: right;
    line-height: 1.5;
  }
  .portfolio-strip .strip-rail{
    display: flex;
    gap: 22px;
    /* overflow-x:auto faz o eixo Y virar auto → a faixa corta o que sobe.
       O padding-top abre espaço para os cards com margin-top negativo (s2 = -30px),
       senão o chip .tag (top:16px) fica cortado. */
    padding: 34px 40px 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio-strip .strip-rail::-webkit-scrollbar{ display: none; height: 0; }

  /* navegação: setas + indicador de progresso */
  .portfolio-strip .strip-nav{
    max-width: 1280px;
    margin: 30px auto 0;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
  }
  .portfolio-strip .strip-progress{
    height: 1px;
    background: var(--line);
    position: relative;
    overflow: hidden;
  }
  .portfolio-strip .strip-progress-bar{
    position: absolute;
    left: 0; top: -1px;
    height: 3px;
    background: var(--gold);
    width: 18%;
    transition: width .35s cubic-bezier(.22,.6,.22,1), left .35s cubic-bezier(.22,.6,.22,1);
  }
  .portfolio-strip .strip-arrows{
    display: flex; gap: 10px;
  }
  .portfolio-strip .strip-arrow{
    width: 48px; height: 48px;
    border: 1px solid var(--line-gold);
    background: var(--bone);
    color: var(--forest);
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .25s ease;
    border-radius: 50%;
  }
  .portfolio-strip .strip-arrow:hover{
    background: var(--gold);
    color: var(--bone);
    border-color: var(--gold);
  }
  .portfolio-strip .strip-arrow:disabled{
    opacity: .25; cursor: not-allowed;
  }
  .portfolio-strip .strip-counter{
    font-family: var(--font-body);
    font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
    color: var(--ink); opacity: .55;
    min-width: 80px;
  }
  .portfolio-strip .strip-counter b{
    color: var(--gold); font-weight: 500;
  }

  .portfolio-strip .strip-card{
    flex: 0 0 auto;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.22,.6,.22,1);
  }
  .portfolio-strip .strip-card:hover{ transform: translateY(-4px); }
  .portfolio-strip .strip-card .img{
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 1.2s cubic-bezier(.22,.6,.22,1);
  }
  .portfolio-strip .strip-card:hover .img{ transform: scale(1.04); }
  .portfolio-strip .strip-card .cap{
    position: absolute; left: 18px; bottom: 16px;
    color: var(--bone);
    font-family: var(--font-body);
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
    z-index: 2;
  }
  .portfolio-strip .strip-card .tag{
    position: absolute; top: 16px; left: 16px;
    z-index: 2;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    background: rgba(247,243,234,.95);
    color: var(--forest);
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
    border: 1px solid rgba(184,150,90,.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .portfolio-strip .strip-card::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4));
    pointer-events: none;
  }
  /* heights variados para ritmo editorial */
  .portfolio-strip .strip-card.s1{ width: 280px; height: 380px; }
  .portfolio-strip .strip-card.s2{ width: 320px; height: 440px; margin-top: -30px; }
  .portfolio-strip .strip-card.s3{ width: 240px; height: 340px; margin-top: 20px; }
  .portfolio-strip .strip-card.s4{ width: 360px; height: 460px; margin-top: -20px; }
  .portfolio-strip .strip-card.s5{ width: 260px; height: 360px; margin-top: 30px; }
  .portfolio-strip .strip-card.s6{ width: 300px; height: 400px; margin-top: -10px; }

  @media (max-width: 700px){
    .portfolio-strip{ padding: 70px 0 50px; }
    .portfolio-strip .strip-head{
      grid-template-columns: 1fr; gap: 16px; padding: 0 24px;
    }
    .portfolio-strip .strip-meta{ text-align: left; }
    .portfolio-strip .strip-rail{ padding: 24px 24px 30px; gap: 14px; }
    .portfolio-strip .strip-card.s1{ width: 220px; height: 300px; }
    .portfolio-strip .strip-card.s2{ width: 240px; height: 340px; margin-top: -20px; }
    .portfolio-strip .strip-card.s3{ width: 200px; height: 280px; margin-top: 14px; }
    .portfolio-strip .strip-card.s4{ width: 260px; height: 360px; margin-top: -14px; }
    .portfolio-strip .strip-card.s5{ width: 220px; height: 300px; margin-top: 20px; }
    .portfolio-strip .strip-card.s6{ width: 230px; height: 320px; margin-top: -8px; }
  }

  /* MOMENT 2 — TRIO editorial (3 colunas grandes com nº romanos) */
  .portfolio-trio{
    background: var(--bone-deep);
    padding: 100px 0 100px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .portfolio-trio .wrap{
    max-width: 1320px; margin: 0 auto; padding: 0 40px;
  }
  .portfolio-trio .trio-head{
    text-align: center; margin-bottom: 70px;
    max-width: 720px; margin-left: auto; margin-right: auto;
  }
  .portfolio-trio .trio-head .eyebrow{
    color: var(--gold);
    justify-content: center; display: inline-flex;
  }
  .portfolio-trio .trio-head h2{
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(36px, 5.2vw, 72px); line-height: 1.02;
    color: var(--forest);
    margin: 16px 0 18px;
    letter-spacing: -.015em;
  }
  .portfolio-trio .trio-head h2 em{ font-style: italic; color: var(--gold); }
  .portfolio-trio .trio-head p{
    font-family: var(--font-body);
    font-size: 16px; line-height: 1.7; color: var(--ink); opacity: .75;
    max-width: 56ch; margin: 0 auto;
  }
  .portfolio-trio .trio-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .portfolio-trio .trio-card{
    position: relative;
    background: var(--bone);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .6s cubic-bezier(.22,.6,.22,1), box-shadow .6s;
  }
  .portfolio-trio .trio-card:nth-child(2){ transform: translateY(40px); }
  .portfolio-trio .trio-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(49,57,33,.18);
  }
  .portfolio-trio .trio-card:nth-child(2):hover{ transform: translateY(34px); }
  .portfolio-trio .trio-img{
    aspect-ratio: 4 / 5;
    background-size: cover; background-position: center;
    position: relative;
    transition: transform 1.2s cubic-bezier(.22,.6,.22,1);
  }
  .portfolio-trio .trio-card:hover .trio-img{ transform: scale(1.05); }
  .portfolio-trio .trio-num{
    position: absolute;
    top: 24px; left: 24px;
    font-family: var(--font-display); font-weight: 300;
    font-size: 14px; letter-spacing: .35em;
    color: var(--bone);
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    z-index: 2;
  }
  .portfolio-trio .trio-meta{
    padding: 28px 28px 32px;
    border-top: 1px solid var(--line);
    background: var(--bone);
  }
  .portfolio-trio .trio-meta .kicker{
    font-family: var(--font-body);
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
  }
  .portfolio-trio .trio-meta .kicker::before{
    content: ""; width: 18px; height: 1px; background: var(--gold);
  }
  .portfolio-trio .trio-meta h3{
    font-family: var(--font-display); font-weight: 300;
    font-size: 26px; line-height: 1.1;
    color: var(--forest);
    margin: 0 0 10px;
    letter-spacing: -.01em;
  }
  .portfolio-trio .trio-meta h3 em{ font-style: italic; color: var(--gold); }
  .portfolio-trio .trio-meta p{
    font-family: var(--font-body);
    font-size: 14px; line-height: 1.65; color: var(--ink); opacity: .7;
  }
  .portfolio-trio .trio-outro{
    margin-top: 96px;
    text-align: center;
    max-width: 720px;
    margin-left: auto; margin-right: auto;
    position: relative;
    padding-top: 56px;
  }
  .portfolio-trio .trio-outro .trio-outro-rule{
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 40px;
    background: var(--gold);
    opacity: .6;
  }
  .portfolio-trio .trio-outro .kicker{
    font-family: var(--font-body);
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 10px;
    justify-content: center;
  }
  .portfolio-trio .trio-outro h3{
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;
    color: var(--ink);
    margin: 0 0 18px;
    letter-spacing: -.015em;
  }
  .portfolio-trio .trio-outro h3 em{ font-style: italic; color: var(--gold); }
  .portfolio-trio .trio-outro p{
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.75; color: var(--ink); opacity: .75;
    max-width: 58ch; margin: 0 auto;
  }

  @media (max-width: 900px){
    .portfolio-trio{ padding: 90px 0; }
    .portfolio-trio .trio-grid{ grid-template-columns: 1fr; gap: 24px; }
    .portfolio-trio .trio-card:nth-child(2){ transform: none; }
    .portfolio-trio .trio-card:nth-child(2):hover{ transform: translateY(-6px); }
    .portfolio-trio .wrap{ padding: 0 24px; }
    .portfolio-trio .trio-head{ margin-bottom: 50px; }
  }

  /* ── Estrutura completa — ambientes (4 fotos) ── */
  .estrutura{
    background: var(--bone);
    padding: 100px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .estrutura .wrap{
    max-width: 1320px; margin: 0 auto; padding: 0 40px;
  }
  .estrutura .est-head{
    text-align: center; margin-bottom: 64px;
    max-width: 760px; margin-left: auto; margin-right: auto;
  }
  .estrutura .est-head .eyebrow{
    color: var(--gold);
    justify-content: center; display: inline-flex;
  }
  .estrutura .est-head h2{
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(34px, 4.8vw, 64px); line-height: 1.04;
    color: var(--forest);
    margin: 16px 0 18px;
    letter-spacing: -.015em;
  }
  .estrutura .est-head h2 em{ font-style: italic; color: var(--gold); }
  .estrutura .est-head p{
    font-family: var(--font-body);
    font-size: 16px; line-height: 1.7; color: var(--ink); opacity: .75;
    max-width: 62ch; margin: 0 auto;
  }
  .estrutura .est-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .estrutura .est-card{
    position: relative;
    background: var(--bone);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .6s cubic-bezier(.22,.6,.22,1), box-shadow .6s;
  }
  .estrutura .est-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(49,57,33,.18);
  }
  .estrutura .est-img{
    aspect-ratio: 3 / 4;
    background-size: cover; background-position: center;
    transition: transform 1.2s cubic-bezier(.22,.6,.22,1);
  }
  .estrutura .est-card:hover .est-img{ transform: scale(1.05); }
  .estrutura .est-meta{
    padding: 22px 24px 26px;
    border-top: 1px solid var(--line);
    background: var(--bone);
    text-align: center;
  }
  .estrutura .est-meta h3{
    font-family: var(--font-display); font-weight: 300;
    font-size: 22px; line-height: 1.15;
    color: var(--forest);
    margin: 0;
    letter-spacing: -.01em;
  }

  @media (max-width: 900px){
    .estrutura{ padding: 90px 0; }
    .estrutura .wrap{ padding: 0 24px; }
    .estrutura .est-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .estrutura .est-head{ margin-bottom: 44px; }
  }
  @media (max-width: 560px){
    .estrutura .est-grid{ grid-template-columns: 1fr; }
  }

  /* ============================================================
     EVENT TYPES — grid editorial assimétrico
     Casamento (carro-chefe) ocupa coluna dupla; outros 3 menores.
     ============================================================ */
  .event-types{
    background: var(--bone);
    padding: 100px 0 100px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .event-types::before{
    content: ""; position: absolute;
    top: 60px; right: -120px;
    width: 320px; height: 320px;
    border: 1px solid var(--line-gold);
    border-radius: 50% 50% 6% 6% / 35% 35% 4% 4%;
    opacity: .35; pointer-events: none;
  }
  .event-types .wrap{ max-width: 1320px; margin: 0 auto; padding: 0 40px; position: relative; }

  .event-types .ev-head{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 60px;
    margin-bottom: 70px;
    max-width: 1100px;
  }
  .event-types .ev-head .ev-eyebrow{
    font-family: var(--font-body);
    font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
    color: var(--gold);
    display: flex; align-items: center; gap: 14px;
    white-space: nowrap;
    padding-bottom: 18px;
  }
  .event-types .ev-head .ev-eyebrow::before{
    content: ""; width: 32px; height: 1px; background: var(--gold);
  }
  .event-types .ev-head h2{
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(40px, 5.6vw, 80px);
    line-height: .98;
    color: var(--forest);
    letter-spacing: -.018em;
    margin: 0;
    overflow-wrap: break-word;
  }
  .event-types .ev-head h2 em{ font-style: italic; color: var(--gold); }
  .event-types .ev-head .ev-sub{
    grid-column: 2;
    font-family: var(--font-body);
    font-size: 17px; line-height: 1.6;
    color: var(--ink); opacity: .72;
    margin: 20px 0 0;
    max-width: 52ch;
    font-style: italic;
  }

  .event-types .ev-grid{
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
  }
  .event-types .ev-card{
    position: relative;
    overflow: hidden;
    background: var(--bone-deep);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: transform .6s cubic-bezier(.22,.6,.22,1), box-shadow .6s;
  }
  .event-types .ev-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(49,57,33,.18);
  }
  .event-types .ev-img{
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 1.4s cubic-bezier(.22,.6,.22,1);
  }
  .event-types .ev-card:hover .ev-img{ transform: scale(1.06); }
  .event-types .ev-card::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,20,8,.05) 0%, rgba(13,20,8,.15) 40%, rgba(13,20,8,.78) 100%);
    pointer-events: none;
  }
  .event-types .ev-meta{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 32px 32px 32px;
    color: var(--bone);
    z-index: 2;
    display: grid; gap: 8px;
  }
  .event-types .ev-num{
    font-family: var(--font-display); font-weight: 300;
    font-size: 13px; letter-spacing: .35em;
    color: var(--gold);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px;
  }
  .event-types .ev-num::before{
    content: ""; width: 22px; height: 1px; background: var(--gold);
  }
  .event-types .ev-card h3{
    font-family: var(--font-display); font-weight: 300;
    line-height: 1;
    margin: 0;
    letter-spacing: -.012em;
    color: var(--bone);
  }
  .event-types .ev-card h3 em{ font-style: italic; color: var(--gold-light, #E2C988); }
  .event-types .ev-card p{
    font-family: var(--font-body);
    font-size: 14px; line-height: 1.6;
    color: var(--bone); opacity: .82;
    margin: 6px 0 0;
    max-width: 38ch;
  }
  .event-types .ev-tag{
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--bone); opacity: .65;
    border-top: 1px solid rgba(247,243,234,.25);
    padding-top: 12px;
  }

  /* hierarquia: casamento grande, ocupa coluna dupla na vertical */
  .event-types .ev-card.feature{
    grid-row: 1 / 3;
    aspect-ratio: auto;
    min-height: 720px;
  }
  .event-types .ev-card.feature h3{ font-size: clamp(40px, 4.6vw, 68px); overflow-wrap: break-word; }
  .event-types .ev-card.feature p{ font-size: 16px; max-width: 46ch; }
  .event-types .ev-card.feature .ev-meta{ padding: 44px 44px 44px; }

  /* secundários */
  .event-types .ev-card.compact{ min-height: 348px; }
  .event-types .ev-card.compact h3{ font-size: clamp(26px, 2.6vw, 38px); }

  @media (max-width: 900px){
    .event-types{ padding: 90px 0; }
    .event-types .wrap{ padding: 0 24px; }
    .event-types .ev-head{
      grid-template-columns: 1fr; gap: 16px; margin-bottom: 50px;
    }
    .event-types .ev-head .ev-eyebrow{ padding-bottom: 0; }
    .event-types .ev-head .ev-sub{ grid-column: 1; font-size: 14px; margin-top: 14px; }
    .event-types .ev-grid{
      grid-template-columns: 1fr; gap: 18px;
    }
    .event-types .ev-card.feature{
      grid-row: auto; min-height: 480px;
    }
    .event-types .ev-card.feature .ev-meta{ padding: 28px 24px; }
    .event-types .ev-card.compact{ min-height: 320px; }
    .event-types .ev-meta{ padding: 24px 22px; }
  }

  @media (max-width: 560px){
    .event-types .ev-card.feature h3{ font-size: clamp(28px, 7vw, 40px); }
  }


  /* Avatar images fill the circular frame */
  .bento-avatar img,
  .bento-avatar-sm img{
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }
  /* Striped fallback only shows for empty avatars */
  .bento-avatar:empty,
  .bento-avatar-sm:empty{
    background:
      repeating-linear-gradient(
        135deg,
        rgba(184,150,90,.22) 0 6px,
        rgba(184,150,90,.08) 6px 12px
      ),
      var(--bone-deep);
    background-size: auto;
    background-position: center;
    position: relative;
  }
  .bento-avatar:empty::after,
  .bento-avatar-sm:empty::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(184,150,90,.35);
    pointer-events: none;
  }

  /* ============================================================
     HERO · GALLERY (variant H consolidada)
     Logo Villa Garden em destaque + carousel editorial de fotos
     ============================================================ */
  .hero-gallery{
    position: relative;
    background: var(--paper);
    color: var(--forest-deep);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .hero-gallery .hg-bg{
    position: absolute; inset: 0;
    background-image:
      radial-gradient(60% 60% at 50% 35%, rgba(184,150,90,0.10), transparent 70%),
      radial-gradient(40% 50% at 90% 90%, rgba(91,107,66,0.08), transparent 75%),
      radial-gradient(40% 50% at 10% 85%, rgba(184,150,90,0.06), transparent 75%);
    pointer-events: none;
    z-index: 0;
  }
  .hero-gallery .hg-bg::after{
    content: "";
    position: absolute; inset: 0;
    background: url('assets/villa-garden-only-tree.svg') center 30% / 320px no-repeat;
    opacity: .055;
    filter: saturate(.4);
  }
  .hero-gallery .hg-stage{
    flex: 1;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 130px 56px 56px;
  }
  .hero-gallery .hg-stage-inner{
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 1100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .hero-gallery .hg-eyebrow{
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .45em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: inline-flex; align-items: center; gap: 14px;
    opacity: 0;
    animation: hgFade .9s var(--ease) .15s forwards;
  }
  .hero-gallery .hg-eyebrow::before,
  .hero-gallery .hg-eyebrow::after{
    content: ""; width: 32px; height: 1px; background: var(--gold); opacity: .7;
  }
  .hero-gallery .hg-logo{
    display: flex; flex-direction: column; align-items: center;
    opacity: 0;
    animation: hgFade 1.1s var(--ease) .3s forwards;
  }
  .hero-gallery .hg-mark{
    width: 168px;
    height: auto;
    display: block;
    filter: invert(38%) sepia(58%) saturate(420%) hue-rotate(11deg) brightness(95%) contrast(90%);
  }
  .hero-gallery .hg-word{
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 34px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--forest);
    margin-top: 16px;
    font-variation-settings: "opsz" 144, "SOFT" 50;
  }
  /* Wordmark image variant replaces the typeset word in the hero */
  .hero-gallery img.hg-wordmark{
    display: block;
    width: clamp(280px, 42vw, 520px);
    height: auto;
    margin-top: 18px;
    /* The PNG already carries the forest tone — leave color untouched */
  }
  .hero-gallery .hg-tag{
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 16px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--gold-deep);
    margin-top: 6px;
    opacity: .88;
  }
  .hero-gallery .hg-sub{
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.3;
    max-width: 28ch;
    margin: 6px auto 0;
    color: var(--forest-deep);
    letter-spacing: -.005em;
    opacity: 0;
    animation: hgFade 1.1s var(--ease) .55s forwards;
  }
  .hero-gallery .hg-sub em{ color: var(--gold); font-style: italic; }

  /* GALLERY STRIP */
  .hero-gallery .hg-gallery{
    position: relative;
    width: 100%;
    margin: 12px 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 12px 18px;
    overflow: hidden;
    perspective: 1200px;
    opacity: 0;
    animation: hgFade 1.4s var(--ease) .75s forwards;
  }
  .hero-gallery .hg-gallery::before,
  .hero-gallery .hg-gallery::after{
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 12%;
    z-index: 3;
    pointer-events: none;
  }
  .hero-gallery .hg-gallery::before{
    left: 0;
    background: linear-gradient(90deg, var(--paper) 0%, rgba(252,250,243,0) 100%);
  }
  .hero-gallery .hg-gallery::after{
    right: 0;
    background: linear-gradient(270deg, var(--paper) 0%, rgba(252,250,243,0) 100%);
  }
  .hero-gallery .hg-card{
    flex: 0 0 auto;
    border-radius: 22px;
    overflow: hidden;
    background: transparent;
    /* Force GPU layer + isolate so the rounded mask is honored cleanly on every paint */
    isolation: isolate;
    transform-style: flat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    filter: none;
    transition: transform .6s var(--ease);
  }
  .hero-gallery .hg-card:hover{
    transform: translateY(-6px) rotate(0deg) !important;
    z-index: 4;
  }
  .hero-gallery .hg-card img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: inherit;
  }
  .hero-gallery .hg-c1{ width: 120px; height: 178px; transform: translateX(-36%) rotate(-5deg); }
  .hero-gallery .hg-c2{ width: 150px; height: 200px; transform: rotate(-2deg); }
  .hero-gallery .hg-c3{ width: 150px; height: 180px; transform: translateY(6px) rotate(1deg); }
  .hero-gallery .hg-c4{ width: 162px; height: 220px; transform: translateY(-8px) rotate(-1deg); }
  .hero-gallery .hg-c5{ width: 150px; height: 180px; transform: translateY(6px) rotate(2deg); }
  .hero-gallery .hg-c6{ width: 162px; height: 220px; transform: translateY(-4px) rotate(-2deg); }
  .hero-gallery .hg-c7{ width: 120px; height: 178px; transform: translateX(36%) rotate(5deg); }

  .hero-gallery .hg-actions{
    display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
    margin-top: 6px;
    opacity: 0;
    animation: hgFade 1s var(--ease) .95s forwards;
  }
  .hero-gallery .hg-cta{
    font-family: var(--font-body);
    font-size: 11px; letter-spacing: .35em; text-transform: uppercase; font-weight: 500;
    padding: 16px 26px;
    text-decoration: none;
    border: 1px solid currentColor;
    transition: all .35s var(--ease);
    display: inline-flex; align-items: center; gap: 12px;
  }
  .hero-gallery .hg-cta.solid{
    background: var(--forest); color: var(--bone); border-color: var(--forest);
  }
  .hero-gallery .hg-cta.solid:hover{
    background: var(--gold); color: var(--forest); border-color: var(--gold);
    letter-spacing: .4em;
  }
  .hero-gallery .hg-cta.ghost{
    background: transparent; color: var(--forest); border-color: var(--forest);
  }
  .hero-gallery .hg-cta.ghost:hover{
    background: rgba(49,57,33,.06);
  }

  /* META STRIP */
  .hero-gallery .hg-meta{
    position: relative; z-index: 3;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--bone-deep);
    border-top: 1px solid var(--line);
    opacity: 0;
    animation: hgFade 1s var(--ease) 1.1s forwards;
  }
  .hero-gallery .hg-meta .m{
    padding: 22px 28px;
    border-right: 1px solid var(--line);
    text-align: center;
  }
  .hero-gallery .hg-meta .m:last-child{ border-right: none; }
  .hero-gallery .hg-meta .m .k{
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 500; opacity: .85;
  }
  .hero-gallery .hg-meta .m .v{
    font-family: var(--font-display);
    font-size: 26px; color: var(--gold); font-weight: 300; line-height: 1.2;
    margin-top: 6px;
    font-variation-settings: "opsz" 96;
  }
  .hero-gallery .hg-meta .m .v small{
    display: block;
    font-family: var(--font-body);
    font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--gold-deep); opacity: .75; font-weight: 500;
    margin-top: 6px;
  }

  @keyframes hgFade{
    from{ opacity: 0; transform: translateY(14px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  /* Nav on gallery hero — paper bg, dark text from start */
  body[data-hero-style="gallery"] .nav{ color: var(--forest); text-shadow: none; }
  body[data-hero-style="gallery"] .nav-brand{ color: var(--forest); text-shadow: none; }
  body[data-hero-style="gallery"] .nav-brand em{ color: var(--gold-deep); }
  body[data-hero-style="gallery"] .nav-links a{ color: var(--forest); text-shadow: none; }
  body[data-hero-style="gallery"] .nav-cta{
    color: var(--forest); background: var(--bone);
    border-color: var(--gold); text-shadow: none;
  }
  body[data-hero-style="gallery"] .nav-cta:hover{
    background: var(--gold); color: var(--forest); border-color: var(--gold);
  }
  /* Scrolled state: outline forest, consistent with base nav */
  body[data-hero-style="gallery"] .nav.scrolled .nav-cta{
    color: var(--forest); background: transparent; border-color: var(--forest);
  }
  body[data-hero-style="gallery"] .nav.scrolled .nav-cta:hover{
    background: var(--forest); color: var(--bone); border-color: var(--forest);
  }

  /* Responsive — tablet */
  @media (max-width: 1024px){
    .hero-gallery .hg-stage{ padding: 120px 32px 48px; }
    .hero-gallery .hg-c1{ width: 100px; height: 150px; }
    .hero-gallery .hg-c2,
    .hero-gallery .hg-c3,
    .hero-gallery .hg-c5{ width: 130px; height: 170px; }
    .hero-gallery .hg-c4,
    .hero-gallery .hg-c6{ width: 144px; height: 200px; }
    .hero-gallery .hg-c7{ width: 100px; height: 150px; }
  }

  /* Mobile */
  @media (max-width: 760px){
    .hero-gallery .hg-stage{ padding: 110px 22px 40px; }
    .hero-gallery .hg-stage-inner{ gap: 18px; }
    .hero-gallery .hg-mark{ width: 132px; }
    .hero-gallery .hg-word{ font-size: 26px; letter-spacing: .2em; }
    .hero-gallery .hg-logo{ width: 100%; }
    .hero-gallery img.hg-wordmark{ display: block; width: auto; max-width: 280px; margin: 12px auto 0; }
    .hero-gallery .hg-tag{ font-size: 13px; }
    .hero-gallery .hg-sub{ font-size: 20px; max-width: 24ch; }
    .hero-gallery .hg-gallery{ gap: 10px; padding: 18px 0; }
    .hero-gallery .hg-c1{ display: none; }
    .hero-gallery .hg-c7{ display: none; }
    .hero-gallery .hg-c2,
    .hero-gallery .hg-c3,
    .hero-gallery .hg-c5{ width: 92px; height: 130px; }
    .hero-gallery .hg-c4,
    .hero-gallery .hg-c6{ width: 100px; height: 144px; }
    .hero-gallery .hg-actions{ display: flex; width: 100%; gap: 10px; flex-wrap: wrap; }
    .hero-gallery .hg-cta{ padding: 13px 18px; font-size: 10px; letter-spacing: .22em; }
    .hero-gallery .hg-meta{ grid-template-columns: repeat(2, 1fr); }
    .hero-gallery .hg-meta .m{ padding: 16px 12px; }
    .hero-gallery .hg-meta .m:nth-child(2n){ border-right: none; }
    .hero-gallery .hg-meta .m:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
    .hero-gallery .hg-meta .m .v{ font-size: 20px; }
  }

  @media (max-width: 420px){
    .hero-gallery .hg-c3,
    .hero-gallery .hg-c5{ display: none; }
    .hero-gallery .hg-c2,
    .hero-gallery .hg-c6{ width: 96px; height: 140px; }
    .hero-gallery .hg-c4{ width: 108px; height: 156px; }
  }