@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

    /* ============================================================
       FONT-FACE — Self-hosted (performance)
       ============================================================ */
    @font-face {
      font-family: 'Bebas Neue';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/bebas-neue-400.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Amatic SC';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/amatic-sc-400.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Amatic SC';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/amatic-sc-700.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Chilanka';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/chilanka-400.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Playfair Display';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/playfair-display-400.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Playfair Display';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/playfair-display-400i.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Playfair Display';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('../fonts/playfair-display-600.woff2') format('woff2');
    }

    /* ============================================================
       DESIGN TOKENS — PARK DOS LAGOS
       ============================================================ */
    :root {
      --c-bg: #F3F8F2;
      --c-surface: #FFFFFF;
      --c-dark: #1A2B1E;
      --c-navy: #1B3040;
      --c-teal: #1B9FAF;
      --c-teal-mid: #0F8899;
      --c-teal-dark: #0A6B78;
      --c-teal-pale: #E3EEF5;
      --c-green: #2E7D32;
      --c-orange: #E87120;
      --c-orange-lt: #FF8D3B;
      --c-sky: #B8E4EF;
      --c-white: #FFFFFF;
      --c-text: #1A2B1E;
      --c-text-lt: #4A5A4A;
      --c-text-muted: #7A8A7A;

      --font-display: 'Bebas Neue', sans-serif;
      --font-hand: 'Amatic SC', cursive;
      --font-accent: 'Chilanka', cursive;
      --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

      --text-hero: clamp(2.8rem, 5.5vw, 5.5rem);
      --text-accent: clamp(1.1rem, 1.5vw, 1.45rem);

      --r-pill: 999px;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --t-base: 0.35s var(--ease-out);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 16px;
    }

    body {
      font-family: var(--font-body);
      background: #E8F5E9;
      color: var(--c-text);
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    /* ============================================================
       HEADER — faixa largura total com logo centralizada
       ============================================================ */
    .site-header {
      position: relative;
      z-index: 200;
      background: #fff;
      width: 100%;
      padding: 1.4rem 3rem;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 2rem;
      box-shadow: 0 2px 24px rgba(26,43,30,0.08);
    }

    /* Faixa teal no topo */
    .site-header::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--c-teal-dark), var(--c-teal), var(--c-teal-pale));
    }

    /* Left copy */
    .header-left {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      text-align: left;
    }

    .header-left .h-brand {
      display: none;
    }

    .header-left .h-tagline {
      font-family: var(--font-body);
      font-size: clamp(0.72rem, 1vw, 0.85rem);
      color: var(--c-text-lt);
      letter-spacing: 2px;
      text-transform: uppercase;
      line-height: 1.6;
      border-left: 2px solid var(--c-teal);
      padding-left: 0.75rem;
    }

    /* Center logo */
    .header-logo-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-mobile { display: none; }
    .logo-desktop {
      height: clamp(100px, 15vw, 180px);
      width: auto;
      max-width: 320px;
      filter: drop-shadow(0 2px 8px rgba(26,43,30,0.12));
    }

    /* Right copy */
    .header-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.5rem;
    }

    .header-right .h-types {
      font-family: var(--font-body);
      font-size: clamp(0.72rem, 1vw, 0.85rem);
      color: var(--c-text-lt);
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: right;
      line-height: 1.6;
      border-right: 2px solid var(--c-teal);
      padding-right: 0.75rem;
    }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      height: 100svh;
      min-height: 600px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      background-color: #1A2B1E;
      transform: scale(1.12);
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg,
          rgba(26, 43, 30, 0.62) 0%,
          rgba(11, 25, 16, 0.28) 50%,
          rgba(26, 43, 30, 0.80) 100%),
        linear-gradient(90deg,
          rgba(27, 159, 175, 0.12) 0%,
          transparent 60%);
    }

    /* Content */
    .hero-inner {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 6rem 2rem 9rem;
      max-width: 1100px;
      width: 100%;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: var(--text-hero);
      line-height: 1.15;
      color: var(--c-white);
      letter-spacing: 3px;
    }

    .hero-title .line {
      display: block;
      overflow: hidden;
    }

    .hero-title .line span {
      display: block;
    }

    .gsap-ready .hero-title .line span {
      transform: translateY(110%);
    }

    .hero-title .accent {
      color: var(--c-sky);
      text-shadow: 0 2px 14px rgba(184, 228, 239, 0.35);
    }

    .hero-sub {
      font-family: var(--font-accent);
      font-size: var(--text-accent);
      color: rgba(255, 255, 255, 0.9);
      margin-top: 1.5rem;
      letter-spacing: 1.5px;
      line-height: 1.5;
      max-width: 580px;
      margin-inline: auto;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }

    .gsap-ready .hero-sub {
      opacity: 0;
      transform: translateY(10px);
    }

    .hero-cta {
      display: flex;
      gap: 1rem;
      justify-content: center;
      margin-top: 2.5rem;
      flex-wrap: wrap;
    }

    .gsap-ready .hero-cta {
      opacity: 0;
      transform: translateY(10px);
    }

    /* ── Scroll indicator mobile (dentro da hero, oculto no desktop) ── */
    .hero-scroll-mobile {
      display: none;
      position: absolute;
      bottom: 3.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      pointer-events: none;
    }

    .hero-scroll-mobile span {
      font-family: var(--font-body);
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, 0.65);
    }

    .hero-scroll-mobile-line {
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65), transparent);
      animation: scrollPulse 2.2s ease-in-out infinite;
    }

    /* ── Descubra strip (área branca abaixo da onda) ── */
    .descubra-strip {
      background: #E8F5E9;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.5rem 0 1.5rem;
      gap: 0.75rem;
    }

    .descubra-label {
      font-family: var(--font-body);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 4px;
      color: var(--c-text-muted);
    }

    .descubra-line {
      width: 1px;
      height: 48px;
      background: linear-gradient(to bottom, var(--c-orange), transparent);
      animation: scrollPulse 2.2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0%, 100% { opacity: 0.4; transform: scaleY(1); }
      50%       { opacity: 1;   transform: scaleY(1.3); }
    }

    /* ── Wave divider (white fill = c-bg) ── */
    .hero-wave {
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      z-index: 3;
    }

    .hero-wave svg {
      display: block;
      width: 100%;
      margin-bottom: -2px;
    }

    /* ============================================================
       BUTTONS
       ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border: none;
      border-radius: var(--r-pill);
      font-family: var(--font-body);
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      transition: transform var(--t-base), box-shadow var(--t-base);
      letter-spacing: 0.4px;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
      transform: skewX(-20deg);
      transition: left 0.65s var(--ease-out);
    }

    .btn:hover::before {
      left: 150%;
    }

    .btn-xl {
      padding: 1.1rem 3rem;
      font-size: 1.05rem;
      letter-spacing: 0.8px;
    }

    .btn-cta {
      background: linear-gradient(135deg, var(--c-orange) 0%, #c85510 100%);
      color: #fff;
      box-shadow: 0 4px 16px rgba(232, 113, 32, 0.28);
    }

    .btn-cta:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 8px 32px rgba(232, 113, 32, 0.42);
    }

    .btn-white {
      background: #fff;
      color: var(--c-dark);
      box-shadow: 0 4px 16px rgba(26, 43, 30, 0.10);
    }

    .btn-white:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(26, 43, 30, 0.15);
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 860px) {
      .site-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem 1.25rem 0.85rem;
        gap: 0.6rem;
      }

      .header-logo-wrap {
        order: 0;
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .logo-desktop {
        display: block;
        height: 110px;
        width: auto;
        max-width: none;
        filter: none;
      }

      .logo-mobile { display: none; }

      .header-left {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(27,159,175,0.2);
        padding-top: 0.5rem;
      }

      .header-left .h-tagline {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
        line-height: 1.6;
        text-align: center;
        border-left: none;
        padding-left: 0;
        color: var(--c-text-muted);
      }

      .header-right { display: none; }

      .hero {
        align-items: stretch;
        height: 78svh;
        min-height: 520px;
        overflow: hidden;
      }

      .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3.5rem 1.5rem 2rem;
      }

      .hero-title {
        line-height: 1.25;
        margin-bottom: 0.5rem;
      }

      .hero-sub {
        margin-top: 1.25rem;
        font-size: 1rem;
        line-height: 1.7;
      }

      .descubra-strip {
        display: none;
      }

      .hero-scroll-mobile {
        display: none;
      }

      .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;
      }

      .btn-xl {
        width: 90%;
        max-width: 360px;
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
      }
    }


    /* ============================================================
       SEÇÃO 2 — POR QUE ESCOLHER
       ============================================================ */
    .why-section {
      background: #E8F5E9;
      padding: 5rem 2rem 6rem;
    }

    .why-intro {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 4rem;
    }

    .why-h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.8rem);
      line-height: 1.05;
      letter-spacing: 2px;
      margin-bottom: 1.4rem;
      background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-teal-dark) 50%, var(--c-teal) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .why-h3 {
      font-family: var(--font-accent);
      font-size: clamp(1rem, 1.4vw, 1.25rem);
      color: var(--c-text-lt);
      line-height: 1.7;
    }

    /* ── Carrossel ── */
    .carousel-wrap {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
    }

    .carousel {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
      border-radius: 24px;
      box-shadow: 0 24px 64px rgba(26, 43, 30, 0.18);
    }

    .carousel-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .carousel-slide.active {
      opacity: 1;
      z-index: 1;
    }

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

    .carousel-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(26, 43, 30, 0.82) 0%,
        rgba(26, 43, 30, 0.2) 50%,
        transparent 100%
      );
    }

    .carousel-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 2.5rem 3rem 3rem;
      text-align: left;
    }

    .carousel-caption-title {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3.5vw, 3.2rem);
      color: #fff;
      line-height: 1.05;
      letter-spacing: 2px;
      margin-bottom: 0.75rem;
    }

    .carousel-caption-sub {
      font-family: var(--font-accent);
      font-size: clamp(0.9rem, 1.2vw, 1.1rem);
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.5;
      max-width: 480px;
    }

    /* Setas */
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.25s, transform 0.25s;
    }

    .carousel-btn:hover {
      background: rgba(255, 255, 255, 0.28);
      transform: translateY(-50%) scale(1.08);
    }

    .carousel-btn--prev { left: 1.25rem; }
    .carousel-btn--next { right: 1.25rem; }

    @media (max-width: 860px) {
      .why-section {
        padding: 3.5rem 1.25rem 4rem;
      }

      .why-intro {
        margin-bottom: 2.5rem;
      }

      .why-h3 { font-size: 1.05rem; }
      .why-h3 br { display: none; }

      .carousel {
        aspect-ratio: 4/5;
      }

      .carousel-caption {
        padding: 1.5rem 1.5rem 2rem;
      }

      .carousel-btn {
        width: 40px;
        height: 40px;
      }

      .carousel-btn--prev { left: 0.75rem; }
      .carousel-btn--next { right: 0.75rem; }
    }

    @media (max-width: 480px) {
      .hero-title {
        font-size: clamp(2rem, 10vw, 3.2rem);
      }

      .hero-scroll {
        bottom: 5rem;
      }
    }

    /* ============================================================
       SEÇÃO 3.5 — BANNER FAMÍLIA / PESCA
       ============================================================ */

    /* Seção: fundo claro alternado, espaçamento igual às outras seções */
    .family-banner {
      background: #E8F5E9;
      padding: 5rem 2rem;
    }

    /* Container centralizado igual ao padrão do site (max 1100px) */
    .family-banner__inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0,0,0,0.35);
    }

    /* ── Coluna esquerda: texto ── */
    .family-banner__text {
      position: relative;
      background: var(--c-dark);
      background-image:
        radial-gradient(ellipse at 15% 85%, rgba(27,159,175,0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 10%, rgba(232,113,32,0.09) 0%, transparent 50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.5rem;
      padding: 4rem 3rem 4rem 4rem;
      overflow: hidden;
    }

    /* Linha teal separando texto e foto */
    .family-banner__text::after {
      content: '';
      position: absolute;
      right: 0; top: 8%; bottom: 8%;
      width: 2px;
      background: linear-gradient(to bottom, transparent, var(--c-teal) 40%, var(--c-teal) 60%, transparent);
    }

    /* Badge */
    .family-banner__badge {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-style: italic;
      letter-spacing: 0.05em;
      color: var(--c-sky);
      border-left: 3px solid var(--c-teal);
      padding-left: 0.75rem;
      line-height: 1.4;
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 1.1s var(--ease-out) 0s, transform 1.1s var(--ease-out) 0s;
    }

    .family-banner.in-view .family-banner__badge {
      opacity: 1;
      transform: translateX(0);
    }

    /* Headline — mesmo padrão das h2 do site */
    .family-banner__headline {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.8rem);
      line-height: 1.05;
      letter-spacing: 2px;
      color: var(--c-white);
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 1.2s var(--ease-out) 0.3s, transform 1.2s var(--ease-out) 0.3s;
    }

    .family-banner.in-view .family-banner__headline {
      opacity: 1;
      transform: translateX(0);
    }

    .family-banner__headline em {
      font-style: normal;
      color: var(--c-orange-lt);
    }

    /* Subtexto — mesmo padrão dos subtítulos do site (Chilanka) */
    .family-banner__sub {
      font-family: var(--font-accent);
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      line-height: 1.75;
      color: rgba(255,255,255,0.82);
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 1.2s var(--ease-out) 0.6s, transform 1.2s var(--ease-out) 0.6s;
    }

    .family-banner.in-view .family-banner__sub {
      opacity: 1;
      transform: translateX(0);
      transition: opacity 0.4s ease, transform 1.2s var(--ease-out) 0.6s;
    }

    /* CTA — usa classes .btn .btn-cta .btn-xl do sistema */
    .family-banner__cta {
      align-self: flex-start;
      opacity: 0;
      transform: translateX(-50px);
      transition:
        opacity 1.2s var(--ease-out) 0.9s,
        transform 1.2s var(--ease-out) 0.9s;
    }

    .family-banner.in-view .family-banner__cta {
      opacity: 1;
      transform: translateX(0);
    }

    /* Partículas */
    .family-banner__particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .family-banner__particles span {
      position: absolute;
      border-radius: 50%;
      background: rgba(184,228,239,0.15);
      animation: floatDot linear infinite;
    }

    .family-banner__particles span:nth-child(1) { width:5px;  height:5px;  top:80%; left:10%; animation-duration:9s;  animation-delay:0s; }
    .family-banner__particles span:nth-child(2) { width:4px;  height:4px;  top:45%; left:75%; animation-duration:13s; animation-delay:2s; }
    .family-banner__particles span:nth-child(3) { width:7px;  height:7px;  top:25%; left:50%; animation-duration:11s; animation-delay:4s; }
    .family-banner__particles span:nth-child(4) { width:3px;  height:3px;  top:88%; left:35%; animation-duration:8s;  animation-delay:1s; }
    .family-banner__particles span:nth-child(5) { width:5px;  height:5px;  top:15%; left:65%; animation-duration:15s; animation-delay:6s; }
    .family-banner__particles span:nth-child(6) { width:6px;  height:6px;  top:60%; left:20%; animation-duration:10s; animation-delay:3s; }

    @keyframes floatDot {
      0%   { transform: translateY(0);     opacity: 0;   }
      10%  { opacity: 0.7; }
      90%  { opacity: 0.3; }
      100% { transform: translateY(-65px); opacity: 0;   }
    }

    /* ── Coluna direita: foto cobre toda a coluna ── */
    .family-banner__photo {
      position: relative;
      width: 380px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateX(24px);
      transition: opacity 0.9s var(--ease-out) 0.15s, transform 0.9s var(--ease-out) 0.15s;
    }

    .family-banner.in-view .family-banner__photo {
      opacity: 1;
      transform: translateX(0);
    }

    /* Wrapper interno que contém apenas as fotos (sem o botão mobile) */
    .family-banner__photo-wrap {
      position: relative;
      flex: 1;
      min-height: 520px;
      overflow: hidden;
    }

    /* Slides do banner de crianças */
    .family-banner__slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .family-banner__slide.active {
      opacity: 1;
    }

    /* Foto retrato: cobre a coluna inteira sem distorção */
    .family-banner__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      animation: kenburnsFam 20s ease-in-out infinite alternate;
      will-change: transform;
      transform-origin: center top;
    }

    /* Área do botão desktop abaixo da foto (fundo escuro, preenchendo espaço) */
    .family-banner__cta-mobile {
      display: none; /* oculto por padrão, só aparece no mobile */
    }

    @keyframes kenburnsFam {
      from { transform: scale(1); }
      to   { transform: scale(1.05); }
    }

    /* Selo circular giratório */
    .family-banner__seal {
      position: absolute;
      top: 1.2rem;
      right: 1.2rem;
      width: 96px;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 4;
    }

    .family-banner__seal-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      color: var(--c-white);
      fill: none;
      animation: rotateSeal 20s linear infinite;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
    }

    @keyframes rotateSeal {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .family-banner__seal-icon {
      font-size: 1.7rem;
      line-height: 1;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    }

    /* ── Mobile ── */
    @media (max-width: 860px) {
      .family-banner {
        padding: 3rem 1.25rem 3rem;
      }

      .family-banner__inner {
        grid-template-columns: 1fr;
        border-radius: 16px;
        overflow: hidden;
      }

      /* Texto em cima */
      .family-banner__text {
        order: 1;
        padding: 2.5rem 1.5rem 2rem;
        gap: 1.1rem;
      }

      .family-banner__text::after { display: none; }

      /* Foto embaixo */
      .family-banner__photo {
        order: 2;
        width: 100%;
        opacity: 1;
        transform: none;
        background: var(--c-dark);
      }

      /* Oculta botão que fica no painel de texto */
      .family-banner__cta--desktop {
        display: none !important;
      }

      /* Botão mobile com mesma animação esquerda→direita */
      .family-banner__cta-mobile .btn {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 0.85s var(--ease-out) 0.52s, transform 0.85s var(--ease-out) 0.52s;
      }

      .family-banner.in-view .family-banner__cta-mobile .btn {
        opacity: 1;
        transform: translateX(0);
      }

      /* Mostra botão abaixo da foto — mesmo fundo do painel de texto */
      .family-banner__cta-mobile {
        display: block;
        background: var(--c-dark);
        background-image:
          radial-gradient(ellipse at 15% 85%, rgba(27,159,175,0.14) 0%, transparent 55%),
          radial-gradient(ellipse at 85% 10%, rgba(232,113,32,0.09) 0%, transparent 50%);
        padding: 1.5rem 1.5rem 2rem;
      }

      .family-banner__cta-mobile .btn:hover,
      .family-banner__cta-mobile .btn:active {
        transform: none !important;
        box-shadow: 0 4px 16px rgba(232,113,32,0.28) !important;
        transition: none !important;
      }

      .family-banner__cta-mobile .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        animation: none !important;
      }

      /* Animações de esquerda→direita mantidas no mobile, disparadas pelo scroll */

      .family-banner__seal {
        width: 76px;
        height: 76px;
        top: 0.8rem;
        right: 0.8rem;
      }
    }

    /* ============================================================
       SEÇÃO 3 — ATRATIVOS (BENTO GRID)
       ============================================================ */
    .atrativos-section {
      background: #F3F8F2;
      padding: 6rem 0 7rem;
      overflow: hidden;
      position: relative;
    }

    .atrativos-intro {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 680px;
      margin: 0 auto 4rem;
      padding: 0 2rem;
    }

    .atrativos-intro h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.8rem);
      letter-spacing: 2px;
      line-height: 1;
      background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-teal-dark) 50%, var(--c-teal) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1rem;
    }

    .atrativos-intro p {
      font-family: var(--font-accent);
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      color: var(--c-text-lt);
      line-height: 1.75;
    }

    .atrativos-chips {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      max-width: 780px;
      margin: 2rem auto 3.5rem;
      padding: 0 2rem;
    }

    .atrativos-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: var(--font-body);
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--c-teal-dark);
      border: 1.5px solid var(--c-teal);
      border-radius: var(--r-pill);
      padding: 0.4rem 0.9rem;
      transition: background var(--t-fast), color var(--t-fast);
    }

    .atrativos-chip .check { color: var(--c-orange); font-size: 0.7rem; }
    .atrativos-chip:hover { background: var(--c-teal); color: #fff; }
    .atrativos-chip:hover .check { color: #fff; }

    /* Bento slideshow */
    .bento-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease;
    }
    .bento-slide.active { opacity: 1; }
    .bento-slide img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.7s var(--ease-out);
    }
    .bento-card:hover .bento-slide.active img { transform: scale(1.06); }

    .bento-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      grid-template-rows: 340px 280px;
      gap: 10px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .bento-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-md);
      cursor: pointer;
    }

    /* Layout das células */
    .bento-card:nth-child(1) { grid-column: 1; grid-row: 1 / 3; } /* Piscina — tall */
    .bento-card:nth-child(2) { grid-column: 2; grid-row: 1; }     /* Piscina Aquecida */
    .bento-card:nth-child(3) { grid-column: 3; grid-row: 1; }     /* Pesca */
    .bento-card:nth-child(4) { grid-column: 2; grid-row: 2; }     /* Playground */
    .bento-card:nth-child(5) { grid-column: 3; grid-row: 2; }     /* Jogos */

    .bento-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s var(--ease-out);
    }

    .bento-card:hover img { transform: scale(1.06); }

    .bento-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10,43,20,0.82) 0%, rgba(10,43,20,0.1) 55%, transparent 100%);
      transition: background 0.4s var(--ease-out);
    }

    .bento-card:hover .bento-overlay {
      background: linear-gradient(to top, rgba(10,107,120,0.85) 0%, rgba(10,107,120,0.25) 55%, transparent 100%);
    }

    .bento-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem 1.75rem;
      transform: translateY(4px);
      transition: transform 0.4s var(--ease-out);
    }

    .bento-card:hover .bento-content { transform: translateY(0); }

    .bento-num {
      display: block;
      width: 32px;
      height: 2px;
      background: var(--c-orange);
      margin-bottom: 0.6rem;
      border-radius: 2px;
    }

    .bento-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.2vw, 2rem);
      letter-spacing: 2px;
      color: #fff;
      line-height: 1;
      margin-bottom: 0.5rem;
    }

    .bento-card:nth-child(1) .bento-title { font-size: clamp(1.8rem, 3vw, 2.6rem); }

    .bento-desc {
      font-family: var(--font-accent);
      font-size: 1rem;
      color: rgba(255,255,255,0.85);
      line-height: 1.5;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
    }

    .bento-card:hover .bento-desc {
      max-height: 80px;
      opacity: 1;
    }

    /* Mobile */
    @media (max-width: 860px) {
      .atrativos-section { padding-bottom: 3rem; }
    }

    @media (max-width: 768px) {
      .atrativos-section { padding-bottom: 3rem !important; }
      .atrativos-chip { font-size: 0.8rem; padding: 0.45rem 1rem; }
      .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 220px 220px;
        gap: 8px;
        padding: 0 1rem;
      }
      .bento-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
      .bento-card:nth-child(2) { grid-column: 1; grid-row: 2; }
      .bento-card:nth-child(3) { grid-column: 2; grid-row: 2; }
      .bento-card:nth-child(4) { grid-column: 1; grid-row: 3; }
      .bento-card:nth-child(5) { grid-column: 2; grid-row: 3; }
      .bento-content {
        padding: 0.9rem 1rem;
      }
      .bento-title { font-size: 1.15rem !important; letter-spacing: 1px; margin-bottom: 0.25rem; }
      .bento-card:nth-child(1) .bento-title { font-size: 1.45rem !important; }
      .bento-num { margin-bottom: 0.35rem; }
      .bento-desc {
        font-size: 0.88rem !important;
        line-height: 1.5;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }

    /* ============================================================
       SEÇÃO 6 — CTA RESERVA
       ============================================================ */
    .cta-section {
      background: #E8F5E9;
      padding: 5rem 2rem 6rem;
      overflow: hidden;
      position: relative;
    }

    /* Organic background blobs */
    .cta-section::before {
      content: '';
      position: absolute;
      width: 520px; height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(27,159,175,0.08) 0%, transparent 70%);
      top: -120px; right: -80px;
      pointer-events: none;
    }

    .cta-section::after {
      content: '';
      position: absolute;
      width: 380px; height: 380px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(46,125,50,0.07) 0%, transparent 70%);
      bottom: -80px; left: -60px;
      pointer-events: none;
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 0 auto;
      background: var(--c-dark);
      border-radius: 28px;
      overflow: hidden;
      padding: 5rem 4rem;
      box-shadow: 0 32px 80px rgba(26,43,30,0.28);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0;
    }

    /* Ripple rings — centradas */
    .cta-inner::before {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      border-radius: 50%;
      border: 1px solid rgba(27,159,175,0.1);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .cta-inner::after {
      content: '';
      position: absolute;
      width: 380px; height: 380px;
      border-radius: 50%;
      border: 1px solid rgba(27,159,175,0.08);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    /* Tent silhouette */
    .cta-trees {
      position: absolute;
      bottom: 0;
      opacity: 0.12;
      pointer-events: none;
      user-select: none;
      filter: invert(1) brightness(2);
    }

    .cta-trees--right { right: 1.5rem; }

    .cta-urgency-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 2rem;
      position: relative;
      z-index: 1;
    }

    .cta-urgency-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--r-pill);
      padding: 0.4rem 1rem;
      font-family: var(--font-body);
      font-size: 0.65rem;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.75);
    }

    .cta-urgency-badge .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--c-orange);
      flex-shrink: 0;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    .cta-urgency-badge:last-child .dot {
      animation-delay: 0.6s;
    }

    .cta-headline {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 5vw, 5rem);
      color: #fff;
      letter-spacing: 3px;
      line-height: 1;
      position: relative;
      z-index: 1;
      margin-bottom: 2rem;
    }

    .cta-headline em {
      font-style: normal;
      color: var(--c-teal);
      -webkit-text-fill-color: var(--c-teal);
    }

    /* Thin teal line separator */
    .cta-sep {
      width: 48px;
      height: 2px;
      background: var(--c-orange);
      border-radius: 2px;
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 1;
    }

    .cta-body {
      font-family: var(--font-body);
      font-size: clamp(1rem, 1.3vw, 1.1rem);
      color: rgba(255,255,255,0.62);
      line-height: 1.75;
      max-width: 560px;
      position: relative;
      z-index: 1;
      margin-bottom: 2rem;
    }

    @keyframes pulse-dot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%       { transform: scale(1.6); opacity: 0.6; }
    }

    .cta-btn-wrap {
      position: relative;
      z-index: 1;
    }

    /* Mobile */
    @media (max-width: 860px) {
      .cta-section { padding: 3rem 1.25rem 4rem; }
      .cta-inner { padding: 3rem 2rem; }
      .cta-headline { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: 2px; }
      .cta-trees { opacity: 0.05; width: 160px; }
      .cta-urgency-wrap { flex-direction: column; align-items: stretch; }
      .cta-urgency-badge { justify-content: center; text-align: center; min-height: 2.8rem; font-size: 0.75rem; letter-spacing: 1.5px; }
    }

    /* ============================================================
       SEÇÃO 7 — FAQ
       ============================================================ */
    .faq-section {
      background: #F3F8F2; /* intercalação: mantém F3F8F2 */
      padding: 5.5rem 1.5rem 6.5rem;
      position: relative;
      overflow: hidden;
    }

    .faq-inner {
      max-width: 820px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .faq-intro {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .faq-eyebrow {
      display: inline-block;
      font-family: var(--font-hand);
      font-size: 1.6rem;
      color: var(--c-teal);
      letter-spacing: 1px;
      margin-bottom: 0.6rem;
    }

    .faq-h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.8rem);
      letter-spacing: 2px;
      line-height: 1;
      background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-teal-dark) 50%, var(--c-teal) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.8rem;
    }

    .faq-sub {
      font-family: var(--font-accent);
      font-size: clamp(0.95rem, 1.2vw, 1.05rem);
      color: var(--c-text-lt);
      line-height: 1.7;
    }

    /* Accordion */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .faq-item {
      border-bottom: 1px solid rgba(26,43,30,0.1);
      overflow: hidden;
    }

    .faq-item:first-child {
      border-top: 1px solid rgba(26,43,30,0.1);
    }

    .faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.4rem 0;
      cursor: pointer;
      list-style: none;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      transition: color 0.25s ease;
    }

    .faq-q::-webkit-details-marker { display: none; }

    .faq-q-text {
      font-family: var(--font-display);
      font-size: clamp(1.05rem, 1.8vw, 1.35rem);
      letter-spacing: 1.5px;
      color: var(--c-dark);
      transition: color 0.25s ease;
      line-height: 1.15;
    }

    .faq-item[open] .faq-q-text {
      color: var(--c-teal-dark);
    }

    .faq-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid var(--c-teal);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--c-teal);
      font-size: 1.2rem;
      line-height: 1;
      transition: background 0.25s ease, transform 0.35s ease;
      font-family: var(--font-display);
    }

    .faq-item[open] .faq-icon {
      background: var(--c-teal);
      color: #fff;
      transform: rotate(45deg);
    }

    .faq-a {
      padding: 0 2rem 1.4rem 1rem;
      font-family: var(--font-accent);
      font-size: clamp(0.95rem, 1.1vw, 1.05rem);
      color: var(--c-text-lt);
      line-height: 1.8;
      border-left: 2px solid var(--c-orange);
      margin-bottom: 0.25rem;
    }

    .faq-a p {
      margin: 0 0 0.65rem;
    }

    .faq-a p:last-child {
      margin-bottom: 0;
    }

    /* Decorative teal line left of section */
    .faq-section::before {
      content: '';
      position: absolute;
      left: 0; top: 10%; bottom: 10%;
      width: 3px;
      background: linear-gradient(to bottom, transparent, var(--c-teal-pale), transparent);
      border-radius: 3px;
    }

    @media (max-width: 768px) {
      .faq-section { padding: 4rem 1.25rem 5rem; }
      .faq-q { padding: 1.2rem 0; }
      .faq-a { font-size: 0.95rem; }
      .faq-sub { font-size: 1.05rem; }
    }

    /* ============================================================
       RODAPÉ
       ============================================================ */
    .site-footer {
      position: relative;
      background: #fff;
      border-top: 4px solid transparent;
      border-image: linear-gradient(90deg, var(--c-teal-dark), var(--c-teal), var(--c-teal-pale)) 1;
    }

    /* ── Main layout ── */
    .footer-main {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem 3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
      text-align: center;
    }

    /* Logo + tagline */
    .footer-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(26,43,30,0.08);
      width: 100%;
    }

    .footer-logo { height: 110px; width: auto; }

    .footer-tagline {
      font-family: var(--font-body);
      font-size: 1.05rem;
      color: var(--c-text-lt);
      line-height: 1.75;
      max-width: 520px;
    }

    .br-mobile { display: none; }
    .footer-bottom-sep--desktop { display: inline; }

    @media (max-width: 860px) {
      .br-mobile { display: block; }
      .footer-bottom-sep--desktop { display: none; }
    }

    /* 3 colunas de info */
    .footer-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
      width: 100%;
    }

    .footer-col { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

    .footer-col-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      letter-spacing: 2.5px;
      color: var(--c-dark);
      margin-bottom: 0.4rem;
    }

    .footer-phone {
      font-family: var(--font-body);
      font-size: 1.05rem;
      color: var(--c-teal-dark); /* Corrigido contraste */
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-phone:hover { color: var(--c-orange); }

    /* Redes sociais */
    .footer-social { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

    .footer-social-link {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      color: var(--c-text-lt);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 1rem;
      transition: color 0.2s ease;
    }

    .footer-social-link:hover { color: var(--c-teal); }

    .footer-social-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 1.5px solid rgba(26,43,30,0.15);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: var(--c-dark);
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      line-height: 0;
    }
    .footer-social-icon svg {
      display: block;
      width: 16px; height: 16px;
    }

    .footer-social-link:hover .footer-social-icon {
      border-color: var(--c-teal);
      background: var(--c-teal);
      color: #fff;
    }

    /* Endereço */
    .footer-address-text {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--c-text-lt);
      line-height: 1.7;
      display: block;
    }

    .footer-map-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--c-teal-dark); /* Corrigido contraste */
      font-family: var(--font-body);
      font-size: 0.9rem;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-map-link:hover { color: var(--c-orange); }

    /* ── Bottom bar ── */
    .footer-bottom {
      border-top: 1px solid rgba(26,43,30,0.08);
      padding: 1.25rem 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      text-align: center;
    }

    .footer-bottom a,
    .footer-bottom span {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--c-text-lt); /* Corrigido contraste */
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-bottom a:hover { color: var(--c-teal-dark); }
    .footer-bottom-sep { margin: 0 0.5rem; opacity: 0.35; }

    .footer-acredito { font-family: var(--font-body); font-size: 0.9rem; color: var(--c-text-lt); } /* Corrigido contraste */
    .footer-acredito a { color: var(--c-teal-dark) !important; text-decoration: none; }
    .footer-acredito a:hover { color: var(--c-orange) !important; }

    @media (max-width: 860px) {
      .footer-main { padding: 3rem 1.5rem 2.5rem; gap: 2rem; }
      .footer-cols { grid-template-columns: 1fr; gap: 2rem; }
    }

    /* ============================================================
       SEÇÃO 5 — DEPOIMENTOS (MARQUEE INFINITO)
       ============================================================ */
    .reviews-section {
      background: #F3F8F2;
      padding: 5rem 0 5.5rem;
      overflow: hidden;
    }

    .reviews-intro {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 0 1.5rem 3.5rem;
    }

    .reviews-h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.8rem);
      letter-spacing: 2px;
      line-height: 1;
      background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-teal-dark) 50%, var(--c-teal) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.75rem;
      white-space: nowrap;
    }

    .reviews-sub {
      font-family: var(--font-accent);
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      color: var(--c-text-lt);
      margin-bottom: 1.75rem;
    }

    /* ── Marquee track ── */
    .reviews-marquee-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;
      user-select: none;
    }

    .reviews-track {
      display: flex;
      gap: 14px;
      width: max-content;
    }

    .reviews-track--fwd {
      animation: marquee-fwd 40s linear infinite;
    }

    .reviews-track--fwd:hover {
      animation-play-state: paused;
    }

    @keyframes marquee-fwd {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── Review Card ── */
    .rev-card {
      flex-shrink: 0;
      width: 300px;
      background: #fff;
      border-radius: var(--r-md);
      padding: 1.25rem 1.4rem 1.1rem;
      box-shadow: var(--sh-xs);
      border: 1px solid rgba(27,159,175,0.1);
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      cursor: default;
    }

    .rev-card:hover {
      box-shadow: var(--sh-md);
      transform: translateY(-3px);
    }

    .rev-card-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .rev-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.1rem;
      color: #fff;
      flex-shrink: 0;
    }

    .rev-meta { flex: 1; min-width: 0; }

    .rev-name {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.92rem;
      color: var(--c-dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rev-stars {
      color: #F9AB00;
      font-size: 0.8rem;
      letter-spacing: 1px;
      line-height: 1.2;
    }

    .rev-google {
      flex-shrink: 0;
      opacity: 0.85;
    }

    .rev-quote {
      position: relative;
      padding-left: 0;
    }

    .rev-quote::before { display: none; }


    .rev-text {
      font-family: Arial, sans-serif;
      font-size: 0.82rem;
      color: var(--c-text-lt);
      line-height: 1.65;
    }

    /* Fade edges */
    .reviews-fade-wrap {
      position: relative;
      z-index: 1;
    }

    .reviews-fade-wrap::before,
    .reviews-fade-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
      z-index: 2;
      pointer-events: none;
    }

    .reviews-fade-wrap::before {
      left: 0;
      background: linear-gradient(to right, #E8F5E9 0%, transparent 100%);
    }

    .reviews-fade-wrap::after {
      right: 0;
      background: linear-gradient(to left, #E8F5E9 0%, transparent 100%);
    }

    @media (max-width: 768px) {
      .reviews-section { padding: 0 0 4rem; }
      .reviews-intro { padding-top: 3rem; }
      .rev-card { width: 260px; padding: 1rem 1.1rem 0.9rem; }
      .reviews-fade-wrap::before,
      .reviews-fade-wrap::after { width: 40px; }
      .reviews-h2 { white-space: normal; font-size: clamp(1.8rem, 7vw, 2.4rem); }
      .reviews-sub { font-size: 1.05rem; }
    }

    /* ============================================================
       SEÇÃO 3 — EXPERIÊNCIAS (IMAGEM ALTERNADA + SLIDESHOW)
       ============================================================ */
    .exp-section {
      background: #E8F5E9;
      padding: 6rem 0 7rem;
      overflow: hidden;
    }

    .exp-intro {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 5rem;
      padding: 0 2rem;
    }

    .exp-intro h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.8rem);
      letter-spacing: 2px;
      line-height: 1;
      background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-teal-dark) 50%, var(--c-teal) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1.2rem;
    }

    .exp-intro p {
      font-family: var(--font-accent);
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      color: var(--c-text-lt);
      line-height: 1.75;
    }

    /* Item: par imagem + texto */
    .exp-item {
      max-width: 1200px;
      margin: 0 auto 3px;
      min-height: 420px;
      background: var(--c-dark);
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }

    .exp-item.in-view { opacity: 1; transform: translateY(0); }

    /* ── Coluna da imagem com slideshow ── */
    .exp-img-col {
      position: relative;
      overflow: hidden;
      min-height: 420px;
      background: #1A2B1E;
    }

    /* Slides empilhados, crossfade automático */
    .exp-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease;
    }

    /* opacity controlada apenas pelo JS via .active */

    .exp-slide.active { opacity: 1; }
    .exp-slide.leaving { opacity: 0; }

    .exp-slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      transition: transform 6s linear;
    }

    .exp-slide img {
      position: relative;
      z-index: 1;
    }

    .exp-slide.active img { transform: scale(1.06); }
    .exp-slide:not(.active) img { transform: scale(1); }

    .exp-dots,
    .exp-controls {
      position: absolute;
      inset: 0;
      display: block;
      align-items: center;
      z-index: 4;
      pointer-events: none;
    }

    .exp-control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      color: var(--c-white);
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      pointer-events: auto;
      transition: background 0.25s ease, transform 0.25s ease;
    }

    .exp-control svg {
      display: block;
      width: 24px;
      height: 24px;
    }

    .exp-control:hover {
      background: rgba(255, 255, 255, 0.26);
      transform: translateY(-50%) scale(1.08);
    }

    .exp-control--prev { left: 1rem; }
    .exp-control--next { right: 1rem; }

    /* Faixa colorida lateral */
    .exp-img-col::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 4px;
      background: linear-gradient(to bottom, var(--c-teal-pale), var(--c-teal-dark));
      transition: width 0.5s var(--ease-out);
      z-index: 3;
    }

    .exp-item:nth-child(odd)  .exp-img-col::after { right: 0; }
    .exp-item:nth-child(even) .exp-img-col::after { left: 0; }
    .exp-item:hover .exp-img-col::after { width: 6px; }

    /* ── Coluna do texto ── */
    .exp-text-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 3rem 4rem 0;
      background: rgba(255,255,255,0.03);
      border-top: 1px solid rgba(255,255,255,0.06);
      justify-content: flex-end;
    }

    .exp-item:nth-child(odd)  .exp-text-col { border-left:  1px solid rgba(255,255,255,0.06); }
    .exp-item:nth-child(even) .exp-text-col { border-right: 1px solid rgba(255,255,255,0.06); }

    .exp-num {
      font-family: var(--font-display);
      font-size: 5rem;
      line-height: 1;
      letter-spacing: -2px;
      color: rgba(255,255,255,0.05);
      margin-bottom: 0.5rem;
      display: block;
    }

    .exp-name {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      letter-spacing: 2px;
      line-height: 1;
      color: var(--c-white);
      margin-bottom: 0.9rem;
    }

    .exp-name span { color: var(--c-teal); }

    .exp-desc {
      font-family: var(--font-accent);
      font-size: clamp(0.95rem, 1.1vw, 1.05rem);
      color: rgba(255,255,255,0.55);
      line-height: 1.75;
      margin-bottom: 1.75rem;
      max-width: 340px;
    }

    /* Tags — linha 1: funcional (teal), linha 2: atmosfera (laranja sutil) */
    .exp-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    /* Layout desktop: texto / tags / cta, imagem full-width, alternando lado */
    .exp-item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto auto;
    }

    /* ímpar: texto esquerda, tags esquerda, cta esquerda, imagem ocupa coluna direita inteira */
    .exp-item:nth-child(odd) .exp-img-col  { grid-column: 2; grid-row: 1 / 4; }
    .exp-item:nth-child(odd) .exp-text-col { grid-column: 1; grid-row: 1; }
    .exp-item:nth-child(odd) > .exp-tags   { grid-column: 1; grid-row: 2; padding: 0.75rem 4rem 1rem; background: rgba(255,255,255,0.03); border-left: 1px solid rgba(255,255,255,0.06); }
    .exp-item:nth-child(odd) > .exp-cta    { grid-column: 1; grid-row: 3; padding: 1.25rem 4rem 1rem; background: rgba(255,255,255,0.03); border-left: 1px solid rgba(255,255,255,0.06); }
    .exp-item:nth-child(odd) > .exp-packages { grid-column: 1 / 3; grid-row: 4; padding: 1.5rem 4rem 2.5rem; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.06); }

    /* par: texto direita, tags direita, cta direita, imagem ocupa coluna esquerda inteira */
    .exp-item:nth-child(even) .exp-img-col  { grid-column: 1; grid-row: 1 / 4; }
    .exp-item:nth-child(even) .exp-text-col { grid-column: 2; grid-row: 1; }
    .exp-item:nth-child(even) > .exp-tags   { grid-column: 2; grid-row: 2; padding: 0.75rem 4rem 1rem; background: rgba(255,255,255,0.03); border-right: 1px solid rgba(255,255,255,0.06); }
    .exp-item:nth-child(even) > .exp-cta    { grid-column: 2; grid-row: 3; padding: 1.25rem 4rem 1rem; background: rgba(255,255,255,0.03); border-right: 1px solid rgba(255,255,255,0.06); }
    .exp-item:nth-child(even) > .exp-packages { grid-column: 1 / 3; grid-row: 4; padding: 1.5rem 4rem 2.5rem; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.06); }

    /* Imagem com proporção 16/9 dentro do grid */
    .exp-img-col { min-height: 600px; }

    .exp-tag {
      font-family: var(--font-body);
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      border-radius: var(--r-pill);
      padding: 0.28rem 0.8rem;
    }

    .exp-tag--teal {
      color: rgba(255,255,255,0.75);
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.07);
    }

    /* ── Mobile ── */
    @media (max-width: 860px) {
      .exp-section { padding: 4rem 0 0; }

      .exp-item,
      .exp-item:nth-child(even) {
        flex-direction: column;
        min-height: auto;
      }

      .exp-img-col {
        flex: 0 0 auto;
        height: 260px;
        /* no mobile, slides precisam de height explícita */
      }

      .exp-slide { position: absolute; height: 100%; }

      .exp-img-col::after { display: none; }

      .exp-text-col {
        padding: 2rem 1.5rem 2.5rem;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.07) !important;
      }

      .exp-num { font-size: 3.5rem; margin-bottom: 0.5rem; }
      .exp-name { font-size: 1.8rem; }
      .exp-desc { max-width: 100%; }
      .exp-intro { margin-bottom: 3rem; }
      .exp-intro h2 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
      .exp-intro p { font-size: 1.05rem; }

      .exp-item,
      .exp-item:nth-child(odd),
      .exp-item:nth-child(even) {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
      }

      .exp-item:nth-child(odd)  .exp-img-col,
      .exp-item:nth-child(even) .exp-img-col  { grid-column: unset; grid-row: unset; order: 2; min-height: 260px; }
      .exp-slide img { object-fit: cover !important; }
      .exp-item:nth-child(odd)  .exp-text-col,
      .exp-item:nth-child(even) .exp-text-col { grid-column: unset; grid-row: unset; order: 1; }
      .exp-item:nth-child(odd)  > .exp-tags,
      .exp-item:nth-child(even) > .exp-tags   { grid-column: unset; grid-row: unset; order: 3; padding: 1.25rem 1.5rem 1.5rem; }
      .exp-item:nth-child(odd)  > .exp-cta,
      .exp-item:nth-child(even) > .exp-cta    { grid-column: unset; grid-row: unset; order: 4; padding: 1.25rem 1.5rem 1rem; text-align: center; }
      .exp-item:nth-child(odd)  > .exp-packages,
      .exp-item:nth-child(even) > .exp-packages { grid-column: unset; grid-row: unset; order: 5; padding: 0 1.5rem 2.5rem; text-align: center; }
      .exp-cta .btn { width: auto; align-self: center; }

      .exp-tags { gap: 0.4rem; }
      .exp-tag {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
        flex: 0 1 calc(50% - 0.2rem);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.4rem;
      }
    }

    /* ============================================================
       BOTÃO FLUTUANTE WHATSAPP
       ============================================================ */
    .whatsapp-float {
      position: fixed;
      right: 1.5rem;
      bottom: 2rem;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      text-decoration: none;
    }

    .whatsapp-float img {
      width: 60px;
      height: 60px;
      display: block;
    }

    .whatsapp-float:hover {
      transform: scale(1.15);
      box-shadow: 0 6px 28px rgba(37, 211, 102, 0.65);
    }

    @media (max-width: 860px) {
      .whatsapp-float {
        right: 1rem;
        bottom: 1.5rem;
        width: 52px;
        height: 52px;
      }
      .whatsapp-float img {
        width: 52px;
        height: 52px;
      }
    }

    /* ============================================================
       PAGINA 404
       ============================================================ */
    .page-404 {
      background: #E8F5E9;
    }

    .site-header--404 {
      position: relative;
      z-index: 20;
    }

    .not-found {
      position: relative;
      min-height: calc(100svh - 148px);
      overflow: hidden;
      display: grid;
      place-items: center;
      padding: clamp(5rem, 8vw, 8rem) 1.5rem clamp(7rem, 10vw, 10rem);
      isolation: isolate;
      background: var(--c-dark);
    }

    .not-found__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 42%;
      transform: scale(1.06);
      filter: saturate(1.08) contrast(1.05);
      z-index: -3;
    }

    .not-found__shade {
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 52% 46%, rgba(184, 228, 239, 0.20), transparent 24rem),
        linear-gradient(180deg, rgba(11, 25, 16, 0.48) 0%, rgba(26, 43, 30, 0.74) 48%, rgba(26, 43, 30, 0.92) 100%),
        linear-gradient(90deg, rgba(27, 159, 175, 0.24), transparent 56%);
    }

    .not-found__map-lines {
      position: absolute;
      inset: 12% 8% 14%;
      z-index: -1;
      opacity: 0.34;
      background:
        repeating-linear-gradient(24deg, transparent 0 38px, rgba(255,255,255,0.16) 39px, transparent 41px),
        radial-gradient(circle at 38% 48%, transparent 0 82px, rgba(184, 228, 239, 0.50) 84px, transparent 87px),
        radial-gradient(circle at 56% 46%, transparent 0 150px, rgba(232, 113, 32, 0.34) 152px, transparent 156px);
      mask-image: radial-gradient(circle at center, #000 0 55%, transparent 74%);
    }

    .not-found__inner {
      position: relative;
      z-index: 2;
      width: min(920px, 100%);
      text-align: center;
      color: var(--c-white);
      animation: notFoundRise 0.8s var(--ease-out) both;
    }

    .not-found__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--font-body);
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 5px;
      color: var(--c-sky);
      margin-bottom: 1.9rem;
    }

    .not-found__eyebrow::before,
    .not-found__eyebrow::after {
      content: '';
      width: 34px;
      height: 1px;
      background: rgba(184, 228, 239, 0.68);
    }

    .not-found__title {
      font-family: var(--font-display);
      font-size: clamp(7rem, 26vw, 19rem);
      line-height: 0.78;
      letter-spacing: 0;
      color: transparent;
      -webkit-text-stroke: clamp(1px, 0.16vw, 3px) rgba(255, 255, 255, 0.86);
      text-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
    }

    .not-found__headline {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 6vw, 5.2rem);
      line-height: 0.96;
      letter-spacing: 2px;
      max-width: 820px;
      margin: 1.4rem auto 0;
      color: var(--c-white);
    }

    .not-found__text {
      font-family: var(--font-accent);
      font-size: clamp(1.02rem, 1.5vw, 1.32rem);
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.82);
      max-width: 650px;
      margin: 1.1rem auto 0;
    }

    .not-found__actions {
      display: flex;
      justify-content: center;
      margin-top: 2.2rem;
    }

    .not-found__marker {
      position: absolute;
      z-index: 1;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--c-orange);
      box-shadow: 0 0 0 8px rgba(232, 113, 32, 0.16), 0 0 34px rgba(232, 113, 32, 0.66);
      animation: markerPulse 2.7s ease-in-out infinite;
    }

    .not-found__marker span {
      position: absolute;
      left: 50%;
      bottom: 1.05rem;
      transform: translateX(-50%);
      font-family: var(--font-body);
      font-size: 0.64rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.74);
      background: rgba(26, 43, 30, 0.48);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--r-pill);
      padding: 0.32rem 0.62rem;
      backdrop-filter: blur(10px);
      white-space: nowrap;
    }

    .not-found__marker--one {
      top: 28%;
      left: 18%;
    }

    .not-found__marker--two {
      right: 19%;
      top: 35%;
      animation-delay: 0.35s;
    }

    .not-found__marker--three {
      left: 26%;
      bottom: 25%;
      animation-delay: 0.7s;
    }

    .not-found__wave {
      display: none;
    }

    @keyframes notFoundRise {
      from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes markerPulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.35);
      }
    }

    @media (max-width: 860px) {
      .not-found {
        min-height: 72svh;
        padding: 4.5rem 1.25rem 7rem;
      }

      .not-found__bg {
        object-position: center;
      }

      .not-found__map-lines,
      .not-found__marker {
        display: none;
      }

      .not-found__eyebrow {
        font-size: 0.66rem;
        letter-spacing: 3px;
        margin-bottom: 1.35rem;
      }

      .not-found__eyebrow::before,
      .not-found__eyebrow::after {
        width: 22px;
      }

      .not-found__title {
        font-size: clamp(6rem, 32vw, 9rem);
      }

      .not-found__headline {
        font-size: clamp(2rem, 11vw, 3.2rem);
      }

      .not-found__actions .btn {
        width: min(100%, 340px);
      }
    }

    /* ============================================================
       EMBEDDED PACKAGES — LANDING PAGE PORTALS
       ============================================================ */
    .btn-packages-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-dark) 100%);
      color: var(--c-white);
      border: none;
      border-radius: var(--r-pill);
      padding: 0.8rem 2rem;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.5px;
      transition: all var(--t-base);
      outline: none;
      margin-top: 0.5rem;
      box-shadow: 0 4px 15px rgba(27, 159, 175, 0.3);
    }

    .btn-packages-toggle:hover {
      background: linear-gradient(135deg, var(--c-teal-mid) 0%, var(--c-teal-dark) 100%);
      color: var(--c-white);
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(27, 159, 175, 0.45);
    }

    .btn-packages-toggle .icon-chevron {
      transition: transform var(--t-base);
    }

    .btn-packages-toggle.is-open .icon-chevron {
      transform: rotate(180deg);
    }

    .packages-dropdown-list {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      margin-top: 0;
      transition: max-height 0.4s var(--ease-out), opacity 0.4s var(--ease-out), margin-top 0.4s var(--ease-out);
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
      text-align: left;
      width: 100%;
    }

    .packages-dropdown-list.is-open {
      max-height: 2000px;
      opacity: 1;
      margin-top: 1.25rem;
    }

    .packages-portal-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .exp-item:nth-child(odd) .packages-portal-wrapper {
      align-items: flex-start;
    }

    .exp-item:nth-child(even) .packages-portal-wrapper {
      align-items: flex-end;
    }

    .package-card-embedded {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all var(--t-base);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .package-card-embedded:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: var(--c-teal);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .package-card-embedded__badge {
      display: inline-block;
      font-size: 0.65rem;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 1px;
      color: #a5f3fc;
      background: rgba(27, 159, 175, 0.16);
      border: 1px solid rgba(27, 159, 175, 0.35);
      padding: 0.2rem 0.6rem;
      border-radius: var(--r-pill);
      align-self: flex-start;
      line-height: 1.2;
    }

    .package-card-embedded__title {
      font-family: var(--font-display);
      font-size: 1.45rem;
      letter-spacing: 1px;
      line-height: 1.1;
      color: var(--c-white);
      margin: 0.25rem 0 0.1rem;
    }

    .package-card-embedded__dates {
      font-family: var(--font-body);
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .package-card-embedded__benefits {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 0.25rem;
    }

    .package-card-embedded__benefit-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.65);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 0.15rem 0.45rem;
      border-radius: 4px;
    }

    .package-card-embedded__price-section {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 0.75rem;
      margin-top: 0.25rem;
    }

    .package-card-embedded__price-label {
      font-family: var(--font-body);
      font-size: 0.65rem;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 0.5px;
    }

    .package-card-embedded__price {
      display: flex;
      align-items: baseline;
      gap: 2px;
      color: var(--c-white);
    }

    .package-card-embedded__price-rs {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--c-teal);
    }

    .package-card-embedded__price-val {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-weight: 900;
      line-height: 1;
    }

    .package-card-embedded__price-unit {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.4);
    }

    .package-card-embedded__arrow {
      background: rgba(27, 159, 175, 0.15);
      color: var(--c-teal);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--t-base);
    }

    .package-card-embedded:hover .package-card-embedded__arrow {
      background: var(--c-teal);
      color: var(--c-white);
      transform: scale(1.1) translateX(2px);
    }

    .exp-packages {
      display: none !important;
    }

    .exp-packages:has(.packages-portal-wrapper) {
      display: block !important;
    }