:root {
      --bg: #0a0907;
      --bg-2: #14100c;
      --bg-3: #1c1812;
      --ink: #f0e9d8;
      --ink-soft: #c9bfa9;
      --ink-mute: #807563;
      --gold: #e8a547;
      --gold-soft: #d49636;
      --gold-deep: #a87420;
      --serif: 'Cormorant Garamond', Georgia, serif;
      --sans: 'Outfit', system-ui, sans-serif;
      --ease: cubic-bezier(.16, .84, .32, 1);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-weight: 300;
      font-size: 17px;
      line-height: 1.7;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* GRAIN OVERLAY */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 100;
      opacity: .04;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

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

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

    .container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* TYPOGRAPHY */
    .serif {
      font-family: var(--serif);
      font-weight: 500;
      letter-spacing: -.01em;
    }

    .italic {
      font-style: italic;
    }

    .gold {
      color: var(--gold);
    }

    .eyebrow {
      display: inline-block;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--serif);
      font-weight: 500;
      letter-spacing: -.015em;
      line-height: 1.1;
    }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: all .35s var(--ease);
      border-radius: 2px;
    }

    .btn-gold {
      background: var(--gold);
      color: #0a0907;
    }

    .btn-gold:hover {
      background: var(--gold-soft);
      transform: translateY(-2px);
      box-shadow: 0 12px 30px -10px rgba(232, 165, 71, .5);
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--ink-mute);
    }

    .btn-ghost:hover {
      border-color: var(--gold);
      color: var(--gold);
    }

    .link-gold {
      color: var(--gold);
      font-size: 14px;
      letter-spacing: .04em;
      border-bottom: 1px solid var(--gold-deep);
      padding-bottom: 2px;
      transition: all .3s;
    }

    .link-gold:hover {
      border-color: var(--gold);
    }

    /* HEADER */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 22px 0;
      background: rgba(10, 9, 7, 0);
      transition: all .4s var(--ease);
      border-bottom: 1px solid transparent;
    }

    .header.scrolled {
      background: rgba(10, 9, 7, .92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(232, 165, 71, .12);
      padding: 14px 0;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: flex;
      align-items: center;
    }

    .header .brand {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s ease;
      transform: translateY(-8px);
    }

    .header.scrolled .brand {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .brand-mark {
      height: 80px;
      width: auto;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
      border-left: 1px solid rgba(232, 165, 71, .25);
      padding-left: 16px;
    }

    .brand-text .academia {
      font-family: var(--sans);
      font-size: 13px;
      letter-spacing: .46em;
      color: var(--ink);
      text-transform: uppercase;
      font-weight: 500;
    }

    .brand-text .aplous {
      font-family: var(--serif);
      font-style: italic;
      font-size: 24px;
      color: var(--gold);
      font-weight: 500;
      margin-top: 3px;
    }

    @media (max-width: 600px) {
      .brand-mark {
        height: 64px;
      }
    }

    .nav {
      display: flex;
      gap: 36px;
    }

    .nav a {
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      transition: color .3s;
      position: relative;
    }

    .nav a:hover {
      color: var(--gold);
    }

    .menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 26px;
      height: 18px;
      position: relative;
      z-index: 70;
    }

    .menu-toggle span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--ink);
      position: absolute;
      left: 0;
      transition: all .4s var(--ease);
    }

    .menu-toggle span:nth-child(1) {
      top: 0;
    }

    .menu-toggle span:nth-child(2) {
      top: 8px;
    }

    .menu-toggle span:nth-child(3) {
      top: 16px;
    }

    .menu-toggle.active span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
      opacity: 0;
      transform: translateX(10px);
    }

    .menu-toggle.active span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    @media (max-width: 860px) {
      .nav {
        display: none;
      }

      .menu-toggle {
        display: block;
      }
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 140px 0 80px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 20%;
      right: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(232, 165, 71, .08), transparent 70%);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      grid-template-rows: auto auto;
      column-gap: 80px;
      row-gap: 0;
      align-items: start;
    }

    .hero-text {
      grid-column: 1;
      grid-row: 2;
    }

    .hero-text .eyebrow {
      margin-bottom: 28px;
    }

    .hero-brand {
      grid-column: 1;
      grid-row: 1;
      margin-bottom: 24px;
      width: fit-content;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .hero-brand .presents {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 400;
    }

    .hero-brand .brand-mark {
      height: 170px;
      transition: transform .5s ease;
    }

    .hero-brand .brand-mark:hover {
      transform: translateY(-2px);
    }

    @media (max-width: 600px) {
      .hero-brand .brand-mark {
        height: 115px;
      }

      .hero-brand {
        margin-bottom: 16px;
      }

      .hero-badge {
        position: static;
        display: inline-block;
        margin-top: 28px;
      }

      .hero-image {
        margin-bottom: 8px;
      }
    }

    .hero-text h1 {
      font-size: clamp(42px, 5.4vw, 78px);
      line-height: 1.02;
      margin-bottom: 32px;
      letter-spacing: -.02em;
    }

    .hero-text h1 .italic {
      color: var(--gold);
      font-weight: 500;
    }

    .hero-text .lede {
      font-size: 18px;
      color: var(--ink-soft);
      line-height: 1.75;
      margin-bottom: 44px;
      max-width: 560px;
      font-weight: 300;
    }

    .hero-ctas {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }

    .hero-image {
      position: relative;
      grid-column: 2;
      grid-row: 1 / 3;
      margin-top: 80px;
    }

    .hero-image-wrap {
      position: relative;
      aspect-ratio: 3/4;
      overflow: hidden;
      border-radius: 4px;
      box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
    }

    .hero-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-image-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(10, 9, 7, .55) 100%);
      pointer-events: none;
    }

    .hero-badge {
      position: absolute;
      bottom: -24px;
      left: -24px;
      background: var(--bg-2);
      border: 1px solid rgba(232, 165, 71, .3);
      padding: 16px 22px;
      border-radius: 2px;
      z-index: 2;
    }

    .hero-badge .label {
      font-size: 10px;
      letter-spacing: .28em;
      color: var(--gold);
      text-transform: uppercase;
    }

    .hero-badge .value {
      font-family: var(--serif);
      font-style: italic;
      font-size: 18px;
      color: var(--ink);
      margin-top: 2px;
    }

    @media (max-width: 860px) {
      .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 36px;
        text-align: center;
      }

      .hero-brand {
        order: 1;
        margin: 0 auto;
      }

      .hero-image {
        order: 2;
        max-width: 440px;
        margin: 0 auto;
        margin-top: 0;
      }

      .hero-text {
        order: 3;
      }

      .hero-ctas {
        justify-content: center;
      }
    }

    /* PILL DIVIDER */
    .divider-section {
      padding: 100px 0;
      background: var(--bg-2);
      position: relative;
    }

    .divider-section::before,
    .divider-section::after {
      content: '';
      position: absolute;
      left: 50%;
      width: 1px;
      height: 40px;
      background: linear-gradient(180deg, var(--gold), transparent);
      transform: translateX(-50%);
    }

    .divider-section::before {
      top: 0;
    }

    .divider-section::after {
      bottom: 0;
      transform: translateX(-50%) rotate(180deg);
    }

    .divider-text {
      max-width: 880px;
      margin: 0 auto;
      text-align: center;
    }

    .divider-text p {
      font-family: var(--serif);
      font-size: clamp(22px, 2.6vw, 32px);
      line-height: 1.4;
      color: var(--ink);
      font-weight: 400;
    }

    .divider-text strong {
      font-weight: 600;
      color: var(--gold);
    }

    .divider-rule {
      width: 60px;
      height: 1px;
      background: var(--gold);
      margin: 32px auto 0;
    }

    /* SECTION GENERIC */
    section {
      padding: 140px 0;
      position: relative;
    }

    .section-head {
      text-align: center;
      margin-bottom: 80px;
    }

    .section-head h2 {
      font-size: clamp(36px, 4.6vw, 60px);
      margin: 16px 0 0;
    }

    .section-head p {
      color: var(--ink-soft);
      font-size: 17px;
      max-width: 620px;
      margin: 20px auto 0;
    }

    /* WHAT YOU FIND - CARDS */
    .encontra {
      background: radial-gradient(circle at 50% 50%, rgba(232, 165, 71, .05) 0%, var(--bg) 70%);
      position: relative;
    }

    .encontra-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .encontra-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width .5s var(--ease);
      opacity: 0.6;
    }

    .encontra-card {
      background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
      border: 1px solid rgba(232, 165, 71, .45);
      padding: 44px 36px;
      border-radius: 4px;
      transition: all .6s var(--ease);
      position: relative;
      overflow: hidden;
      box-shadow: 0 15px 50px -10px rgba(0, 0, 0, .6), inset 0 0 20px rgba(232, 165, 71, .05);
    }

    /* SHIMMER EFFECT */
    .encontra-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -150%;
      width: 80%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(232, 165, 71, 0.08),
        transparent
      );
      transform: skewX(-20deg);
      animation: card-shimmer 8s infinite var(--ease);
      pointer-events: none;
    }

    @keyframes card-shimmer {
      0% { left: -150%; }
      30%, 100% { left: 200%; }
    }

    .encontra-card:hover {
      border-color: var(--gold);
      transform: translateY(-8px) scale(1.01);
      box-shadow: 0 25px 70px -15px rgba(232, 165, 71, .25), inset 0 0 30px rgba(232, 165, 71, .08);
    }

    .encontra-card.featured {
      border: 2px solid var(--gold);
      box-shadow: 0 25px 100px -10px rgba(232, 165, 71, .5), inset 0 0 30px rgba(232, 165, 71, .1);
      background: linear-gradient(180deg, var(--bg-3) 0%, #1a1610 100%);
      z-index: 2;
      animation: card-float 6s ease-in-out infinite;
    }

    @keyframes card-float {
      0%, 100% { transform: translateY(-10px) scale(1.02); }
      50% { transform: translateY(-18px) scale(1.02); }
    }

    .encontra-card.featured:hover {
      border-color: var(--gold-soft);
      box-shadow: 0 30px 120px -15px rgba(232, 165, 71, .65), inset 0 0 40px rgba(232, 165, 71, .15);
      transform: translateY(-22px) scale(1.04);
      animation-play-state: paused;
    }

    .encontra-card.featured::before {
      width: 100%;
    }

    .encontra-card:hover::before {
      width: 100%;
    }

    .encontra-card .badge {
      position: absolute;
      top: 24px;
      right: 24px;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(232, 165, 71, .4);
      padding: 4px 10px;
      border-radius: 2px;
      font-weight: 500;
    }

    .encontra-icon {
      width: 44px;
      height: 44px;
      margin-bottom: 22px;
      color: var(--gold);
    }

    .encontra-card h3 {
      font-size: 26px;
      margin-bottom: 14px;
      color: var(--ink);
    }

    .encontra-card p {
      color: var(--ink-soft);
      font-size: 15.5px;
      line-height: 1.7;
    }

    @media (max-width: 700px) {
      .encontra-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width: 701px) {
      .encontra-card.featured {
        order: 2;
      }

      .encontra-card:not(.featured):nth-child(2) {
        order: 1;
      }

      .encontra-card:not(.featured):nth-child(3) {
        order: 3;
      }
    }

    /* O PROFESSOR */
    .professor {
      background: var(--bg-2);
    }

    .professor-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 80px;
      align-items: center;
    }

    .professor-img-wrap {
      position: relative;
      aspect-ratio: 3/4;
      overflow: hidden;
      border-radius: 4px;
    }

    .professor-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .professor-img-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid var(--gold);
      transform: translate(20px, 20px);
      border-radius: 4px;
      z-index: -1;
    }

    .professor-text h2 {
      font-size: clamp(36px, 4.4vw, 58px);
      margin: 14px 0 36px;
    }

    .professor-text .signature {
      font-family: var(--serif);
      font-style: italic;
      font-size: 24px;
      color: var(--gold);
      margin-bottom: 8px;
    }

    .professor-text p {
      margin-bottom: 20px;
      color: var(--ink-soft);
      font-size: 16.5px;
      line-height: 1.8;
    }

    .professor-text em {
      color: var(--ink);
      font-style: italic;
    }

    .credentials {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 36px;
    }

    .cred {
      padding: 10px 18px;
      border: 1px solid rgba(232, 165, 71, .25);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-soft);
      border-radius: 2px;
    }

    @media (max-width: 860px) {
      .professor-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }
    }

    /* CURSOS */
    .cursos {
      background: var(--bg);
    }

    .cursos-grid {
      display: flex;
      overflow-x: auto;
      gap: 32px;
      padding-bottom: 32px;
      cursor: grab;
      user-select: none;
      scroll-behavior: smooth;
    }

    .cursos-grid.active {
      cursor: grabbing;
    }

    .cursos-grid::-webkit-scrollbar {
      height: 6px;
    }

    .cursos-grid::-webkit-scrollbar-track {
      background: rgba(232, 165, 71, .1);
      border-radius: 4px;
    }

    .cursos-grid::-webkit-scrollbar-thumb {
      background: var(--gold);
      border-radius: 4px;
    }

    /* CAROUSEL WRAPPER & AFFORDANCES */
    .carousel-wrap {
      position: relative;
    }

    .carousel-wrap::before,
    .carousel-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 32px;
      width: 80px;
      pointer-events: none;
      z-index: 2;
      transition: opacity .3s var(--ease);
      opacity: 0;
    }

    .carousel-wrap::before {
      left: 0;
      background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
    }

    .carousel-wrap::after {
      right: 0;
      background: linear-gradient(-90deg, var(--bg) 0%, transparent 100%);
    }

    /* Dynamic Shadow Visibility */
    .carousel-wrap:not(.is-start)::before {
      opacity: 1;
    }

    .carousel-wrap:not(.is-end)::after {
      opacity: 1;
    }

    .carousel-hint {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .carousel-drag-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      animation: hint-pulse 2.4s ease-in-out infinite;
    }

    .carousel-drag-label svg {
      width: 20px;
      height: 12px;
      color: var(--gold);
    }

    @keyframes hint-pulse {

      0%,
      100% {
        opacity: .5;
        transform: translateX(0);
      }

      50% {
        opacity: 1;
        transform: translateX(4px);
      }
    }

    .carousel-arrows {
      display: flex;
      gap: 10px;
    }

    .carousel-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(232, 165, 71, .3);
      background: transparent;
      color: var(--gold);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .3s var(--ease);
      flex-shrink: 0;
    }

    .carousel-btn:hover {
      background: rgba(232, 165, 71, .1);
      border-color: var(--gold);
    }

    .carousel-btn:disabled {
      opacity: .25;
      cursor: default;
    }

    .carousel-btn svg {
      width: 16px;
      height: 16px;
    }


    .cursos-grid>* {
      flex: 0 0 calc(33.333% - 22px);
    }

    .curso-card {
      background: var(--bg-2);
      border: 1px solid rgba(232, 165, 71, .15);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all .4s var(--ease);
    }

    .curso-card:hover {
      border-color: rgba(232, 165, 71, .4);
      transform: translateY(-6px);
      box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6);
    }

    .curso-img {
      aspect-ratio: 4/5;
      overflow: hidden;
      position: relative;
    }

    .curso-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 1s var(--ease);
    }

    .curso-card:hover .curso-img img {
      transform: scale(1.04);
    }

    .curso-body {
      padding: 32px 28px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .curso-body .eyebrow {
      margin-bottom: 14px;
    }

    .curso-body h3 {
      font-size: 30px;
      margin-bottom: 16px;
      color: var(--ink);
    }

    .curso-body .desc {
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.7;
      flex: 1;
      margin-bottom: 28px;
    }

    .curso-price {
      margin-bottom: 4px;
    }

    .curso-price .from {
      display: block;
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 4px;
    }

    .curso-price .value {
      font-family: var(--serif);
      font-size: 26px;
      color: var(--gold);
      font-weight: 500;
    }

    .curso-price .install {
      font-size: 13px;
      color: var(--ink-soft);
      margin-top: 2px;
    }

    .curso-meta {
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin: 14px 0 24px;
      padding-top: 14px;
      border-top: 1px solid rgba(232, 165, 71, .12);
    }

    .curso-card .btn {
      width: 100%;
      justify-content: center;
    }

    .cursos-grid-text {
      display: flex;
      overflow-x: auto;
      gap: 28px;
      margin-top: 32px;
      padding-bottom: 32px;
      cursor: grab;
      user-select: none;
    }

    .cursos-grid-text.active {
      cursor: grabbing;
    }

    .cursos-grid-text::-webkit-scrollbar {
      height: 6px;
    }

    .cursos-grid-text::-webkit-scrollbar-track {
      background: rgba(232, 165, 71, .1);
      border-radius: 4px;
    }

    .cursos-grid-text::-webkit-scrollbar-thumb {
      background: var(--gold);
      border-radius: 4px;
    }

    .cursos-grid-text>* {
      flex: 0 0 calc(33.333% - 19px);
    }

    .curso-card-text {
      background: var(--bg-2);
      border: 1px solid rgba(232, 165, 71, .15);
      border-radius: 4px;
      padding: 36px 30px;
      display: flex;
      flex-direction: column;
      transition: all .4s var(--ease);
    }

    .curso-card-text:hover {
      border-color: rgba(232, 165, 71, .4);
      transform: translateY(-4px);
    }

    .curso-card-text .roman {
      font-family: var(--serif);
      font-style: italic;
      font-size: 56px;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 18px;
    }

    .curso-card-text h3 {
      font-size: 24px;
      margin-bottom: 12px;
      color: var(--ink);
    }

    .curso-card-text p {
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.7;
      flex: 1;
    }

    .curso-card-mini {
      background: var(--bg-2);
      border: 1px solid rgba(232, 165, 71, .15);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all .4s var(--ease);
    }

    .curso-card-mini:hover {
      border-color: rgba(232, 165, 71, .4);
      transform: translateY(-4px);
      box-shadow: 0 24px 48px -22px rgba(0, 0, 0, .6);
    }

    .curso-card-mini .curso-img {
      aspect-ratio: 4/5;
      overflow: hidden;
      position: relative;
    }

    .curso-card-mini .curso-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 1s var(--ease);
    }

    .curso-card-mini:hover .curso-img img {
      transform: scale(1.04);
    }

    .curso-card-mini .curso-body {
      padding: 24px 22px 28px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .curso-card-mini .eyebrow {
      margin-bottom: 10px;
    }

    .curso-card-mini h3 {
      font-size: 22px;
      margin-bottom: 10px;
      color: var(--ink);
    }

    .curso-card-mini p {
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.65;
      flex: 1;
    }

    /* CURSOS - LISTA HORIZONTAL (YT) */
    .cursos-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .curso-yt {
      background: var(--bg-2);
      border: 1px solid rgba(232, 165, 71, .15);
      border-radius: 4px;
      overflow: hidden;
      transition: all .4s var(--ease);
    }

    .curso-yt:hover {
      border-color: rgba(232, 165, 71, .4);
      box-shadow: 0 14px 36px -24px rgba(0, 0, 0, .6);
    }

    .curso-yt-cover {
      width: 100%;
      overflow: hidden;
      position: relative;
      line-height: 0;
    }

    .curso-yt-cover img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 1.2s var(--ease);
    }

    .curso-yt:hover .curso-yt-cover img {
      transform: scale(1.03);
    }

    .curso-yt-body {
      padding: 16px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid rgba(232, 165, 71, .1);
    }

    /* Title is baked into the cover image; keep only the meta as a caption */
    .curso-yt-head h3 {
      display: none;
    }

    .curso-yt-body .eyebrow {
      display: block;
      margin: 0;
    }

    .curso-toggle {
      flex-shrink: 0;
      background: none;
      border: 1px solid rgba(232, 165, 71, .4);
      color: var(--gold);
      font-family: inherit;
      font-size: 13px;
      letter-spacing: .04em;
      padding: 9px 20px;
      border-radius: 2px;
      cursor: pointer;
      transition: all .3s var(--ease);
    }

    .curso-toggle:hover {
      background: rgba(232, 165, 71, .08);
    }

    .curso-info {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .5s var(--ease);
      padding: 0 28px;
    }

    .curso-info.open {
      grid-template-rows: 1fr;
      padding-bottom: 30px;
    }

    .curso-info-inner {
      overflow: hidden;
      min-height: 0;
    }

    .curso-info p.curso-lead {
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.7;
      max-width: 760px;
    }

    .curso-detail {
      margin-top: 26px;
      padding-top: 24px;
      border-top: 1px solid rgba(232, 165, 71, .12);
    }

    .curso-detail-title {
      font-family: var(--serif);
      font-size: 21px;
      font-weight: 500;
      color: var(--gold);
      letter-spacing: .01em;
      margin-bottom: 18px;
    }

    .modulos {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px 40px;
    }

    .modulo-nome {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold-deep);
      margin-bottom: 10px;
    }

    .modulo-nome span {
      color: var(--ink-mute);
      letter-spacing: .06em;
      text-transform: none;
      font-size: 12px;
    }

    .aulas {
      list-style: none;
      counter-reset: aula;
    }

    .aulas li {
      counter-increment: aula;
      position: relative;
      padding-left: 30px;
      color: var(--ink-soft);
      font-size: 14.5px;
      line-height: 1.55;
      margin-bottom: 7px;
    }

    .aulas li::before {
      content: counter(aula, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: 1px;
      font-size: 11.5px;
      color: var(--gold-deep);
      letter-spacing: .05em;
    }

    .temas {
      list-style: none;
      columns: 2;
      column-gap: 40px;
    }

    .temas li {
      position: relative;
      padding-left: 20px;
      color: var(--ink-soft);
      font-size: 14.5px;
      line-height: 1.55;
      margin-bottom: 9px;
      break-inside: avoid;
    }

    .temas li::before {
      content: '';
      position: absolute;
      left: 2px;
      top: 10px;
      width: 5px;
      height: 5px;
      border: 1px solid var(--gold-deep);
      transform: rotate(45deg);
    }

    .curso-bonus {
      margin-top: 26px;
      padding: 18px 22px;
      background: rgba(232, 165, 71, .05);
      border-left: 2px solid var(--gold-deep);
      border-radius: 2px;
    }

    .curso-bonus .modulo-nome {
      margin-bottom: 6px;
    }

    .curso-bonus p {
      color: var(--ink-soft);
      font-size: 14.5px;
      line-height: 1.65;
      max-width: 700px;
    }

    .curso-incluso {
      margin-top: 24px;
      font-size: 13.5px;
      color: var(--ink-mute);
      font-style: italic;
    }

    @media (max-width: 860px) {

      .modulos,
      .temas {
        grid-template-columns: 1fr;
        columns: 1;
      }
    }

    @media (max-width: 600px) {
      .curso-yt-body {
        padding: 13px 16px;
        gap: 12px;
      }

      .curso-yt-body .eyebrow {
        font-size: 10px;
        letter-spacing: .14em;
      }

      .curso-toggle {
        font-size: 11.5px;
        padding: 8px 14px;
      }

      .curso-info {
        padding: 0 18px;
      }

      .curso-info.open {
        padding-bottom: 20px;
      }
    }

    @media (max-width: 980px) {
      .cursos-grid>* {
        flex: 0 0 calc(50% - 16px);
      }

      .cursos-grid-text>* {
        flex: 0 0 calc(50% - 14px);
      }
    }

    @media (max-width: 600px) {
      .cursos-grid>* {
        flex: 0 0 85%;
      }

      .cursos-grid-text>* {
        flex: 0 0 85%;
      }
    }

    /* MÉTODO */
    .metodo {
      background: var(--bg-2);
      position: relative;
    }

    .metodo-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 80px;
      align-items: center;
    }

    .metodo-img-wrap {
      aspect-ratio: 3/4;
      overflow: hidden;
      border-radius: 4px;
      position: relative;
    }

    .metodo-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .metodo-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(10, 9, 7, .4) 100%);
    }

    .metodo-text .eyebrow {
      margin-bottom: 18px;
    }

    .metodo-text h2 {
      font-size: clamp(36px, 4.4vw, 56px);
      margin-bottom: 32px;
    }

    .metodo-text p {
      color: var(--ink-soft);
      font-size: 17px;
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .metodo-quote {
      margin-top: 44px;
      padding: 28px 32px;
      border-left: 2px solid var(--gold);
      background: rgba(232, 165, 71, .04);
      border-radius: 0 4px 4px 0;
    }

    .metodo-quote q {
      font-family: var(--serif);
      font-style: italic;
      font-size: 21px;
      line-height: 1.5;
      color: var(--ink);
      display: block;
      margin-bottom: 14px;
      quotes: '\201C' '\201D';
    }

    .metodo-quote q::before {
      content: open-quote;
      color: var(--gold);
    }

    .metodo-quote q::after {
      content: close-quote;
      color: var(--gold);
    }

    .metodo-quote cite {
      font-style: normal;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold);
    }

    @media (max-width: 860px) {
      .metodo-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }
    }

    /* DEPOIMENTOS */
    .depoimentos {
      background-image: linear-gradient(rgba(10, 9, 7, .93), rgba(10, 9, 7, .93)), url('assets/images/img_1.webp');
      background-size: cover;
      background-position: center top;
      background-attachment: fixed;
    }

    .depo-grid {
      display: flex;
      overflow-x: auto;
      gap: 28px;
      padding-bottom: 32px;
      cursor: grab;
      user-select: none;
    }

    .depo-grid.active {
      cursor: grabbing;
    }

    .depo-grid::-webkit-scrollbar {
      height: 6px;
    }

    .depo-grid::-webkit-scrollbar-track {
      background: rgba(232, 165, 71, .1);
      border-radius: 4px;
    }

    .depo-grid::-webkit-scrollbar-thumb {
      background: var(--gold);
      border-radius: 4px;
    }

    .depo-grid>* {
      flex: 0 0 calc(33.333% - 19px);
    }

    .depo-card {
      background: rgba(20, 16, 12, .8);
      border: 1px solid rgba(232, 165, 71, .12);
      padding: 36px 30px;
      border-radius: 4px;
      backdrop-filter: blur(10px);
      position: relative;
      transition: all .4s var(--ease);
    }

    .depo-card::before {
      content: '\201C';
      position: absolute;
      top: 6px;
      left: 18px;
      font-family: var(--serif);
      font-size: 80px;
      color: var(--gold);
      opacity: .35;
      line-height: 1;
    }

    .depo-card:hover {
      border-color: rgba(232, 165, 71, .3);
      transform: translateY(-4px);
    }

    .depo-card p {
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.6;
      color: var(--ink);
      margin: 24px 0 22px;
      font-style: italic;
      font-weight: 400;
    }

    .depo-card .author {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .depo-card .author::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--gold);
    }

    @media (max-width: 980px) {
      .depo-grid>* {
        flex: 0 0 calc(50% - 14px);
      }
    }

    @media (max-width: 600px) {
      .depo-grid>* {
        flex: 0 0 85%;
      }
    }

    /* PLANOS */
    .planos {
      background: var(--bg-2);
      padding: 120px 0;
    }

    .planos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      max-width: 980px;
      margin: 0 auto;
    }

    .planos-whatsapp {
      max-width: 980px;
      margin: 40px auto 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .planos-whatsapp p {
      color: var(--ink-soft);
      font-size: 17px;
    }

    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      border: 1px solid rgba(232, 165, 71, .4);
      border-radius: 3px;
      color: var(--gold);
      font-size: 15px;
      letter-spacing: .02em;
      text-decoration: none;
      transition: all .3s var(--ease);
    }

    .btn-whatsapp svg {
      width: 20px;
      height: 20px;
    }

    .btn-whatsapp:hover {
      background: rgba(232, 165, 71, .08);
      border-color: var(--gold);
    }

    .plano-card {
      background: var(--bg);
      border: 1px solid rgba(232, 165, 71, .2);
      border-radius: 4px;
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      transition: all .4s var(--ease);
      position: relative;
    }

    .plano-card.featured {
      border-color: var(--gold);
      background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    }

    .plano-card.featured::before {
      content: "Recomendado";
      position: absolute;
      top: -12px;
      left: 32px;
      background: var(--gold);
      color: #0a0907;
      padding: 4px 14px;
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      font-weight: 600;
      border-radius: 2px;
    }

    .plano-card h3 {
      font-size: 32px;
      margin-bottom: 8px;
    }

    .plano-card .pitch {
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 28px;
      min-height: 50px;
    }

    .plano-price {
      margin-bottom: 8px;
    }

    .plano-price .value {
      font-family: var(--serif);
      font-size: 42px;
      color: var(--gold);
      font-weight: 500;
      line-height: 1;
    }

    .plano-price .per {
      font-size: 14px;
      color: var(--ink-soft);
      margin-left: 4px;
    }

    .plano-annual {
      font-size: 13px;
      color: var(--ink-mute);
      margin-bottom: 28px;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(232, 165, 71, .12);
    }

    .plano-features {
      list-style: none;
      padding: 0;
      margin: 0 0 32px;
      flex: 1;
    }

    .plano-features li {
      padding: 10px 0 10px 28px;
      position: relative;
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.5;
    }

    .plano-features li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 10px;
      color: var(--gold);
      font-weight: 600;
    }

    .combo-box {
      background: rgba(232, 165, 71, .05);
      border: 1px dashed rgba(232, 165, 71, .3);
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 24px;
    }

    .combo-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 12px;
    }

    .combo-list {
      list-style: none;
      padding: 0;
      margin: 0 0 12px;
    }

    .combo-list li {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--ink-soft);
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    .combo-list li:last-child {
      border-bottom: none;
    }

    .combo-list li .price del {
      color: var(--ink-mute);
      margin-right: 6px;
      font-size: 12px;
    }

    .combo-list li .price strong {
      color: var(--gold);
    }

    .combo-total {
      font-size: 13px;
      text-align: center;
      color: #fff;
      background: rgba(232, 165, 71, .15);
      padding: 8px;
      border-radius: 2px;
    }

    .combo-total strong {
      color: var(--gold);
    }

    .plano-card .btn {
      width: 100%;
      justify-content: center;
    }

    @media (max-width: 760px) {
      .planos-grid {
        grid-template-columns: 1fr;
      }
    }

    /* PARA QUEM É */
    .para-quem {
      background: var(--bg);
      padding: 120px 0;
    }

    .pq-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      margin-top: 60px;
    }

    .pq-item {
      text-align: center;
      padding: 28px 20px;
    }

    .pq-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 20px;
      color: var(--gold);
    }

    .pq-item h4 {
      font-size: 22px;
      margin-bottom: 12px;
      color: var(--ink);
    }

    .pq-item p {
      color: var(--ink-soft);
      font-size: 14.5px;
      line-height: 1.65;
    }

    @media (max-width: 860px) {
      .pq-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 500px) {
      .pq-grid {
        grid-template-columns: 1fr;
      }
    }

    /* FAQ */
    .faq {
      background: var(--bg-2);
    }

    .faq-list {
      max-width: 820px;
      margin: 0 auto;
    }

    .faq-item {
      border-bottom: 1px solid rgba(232, 165, 71, .15);
    }

    .faq-item summary {
      padding: 28px 0;
      font-family: var(--serif);
      font-size: 22px;
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--ink);
      transition: color .3s;
    }

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

    .faq-item summary::after {
      content: '+';
      font-family: var(--sans);
      font-size: 26px;
      color: var(--gold);
      font-weight: 300;
      transition: transform .3s;
    }

    .faq-item[open] summary {
      color: var(--gold);
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-item summary:hover {
      color: var(--gold);
    }

    .faq-answer {
      padding: 0 0 28px;
      color: var(--ink-soft);
      font-size: 16px;
      line-height: 1.8;
      max-width: 92%;
    }

    /* CTA FINAL */
    .cta-final {
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    .cta-final::before {
      content: '';
      position: absolute;
      top: -200px;
      left: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(232, 165, 71, .08), transparent 70%);
    }

    .cta-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 80px;
      align-items: center;
    }

    .cta-img-wrap {
      aspect-ratio: 3/4;
      overflow: hidden;
      border-radius: 4px;
      position: relative;
    }

    .cta-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(20%);
    }

    .cta-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 60%, rgba(232, 165, 71, .12) 100%);
    }

    .cta-text .eyebrow {
      margin-bottom: 24px;
    }

    .cta-text h2 {
      font-size: clamp(38px, 4.8vw, 64px);
      margin-bottom: 28px;
      line-height: 1.05;
    }

    .cta-text p {
      color: var(--ink-soft);
      font-size: 18px;
      line-height: 1.75;
      margin-bottom: 40px;
    }

    .cta-text .cta-buttons {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .cta-text .btn-gold {
      padding: 20px 40px;
      font-size: 15px;
    }

    @media (max-width: 860px) {
      .cta-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }
    }

    /* FOOTER */
    footer {
      background: #060503;
      padding: 70px 0 36px;
      border-top: 1px solid rgba(232, 165, 71, .15);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 50px;
    }

    .footer-brand .brand-mark {
      height: 80px;
      margin-bottom: 16px;
    }

    .footer-brand .academia {
      font-size: 10px;
      letter-spacing: .42em;
      color: var(--ink-soft);
      text-transform: uppercase;
    }

    .footer-brand .aplous {
      font-family: var(--serif);
      font-style: italic;
      font-size: 26px;
      color: var(--gold);
    }

    .footer-brand p {
      margin-top: 16px;
      color: var(--ink-mute);
      font-size: 14px;
      font-style: italic;
      font-family: var(--serif);
    }

    .footer-col h5 {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 18px;
      font-weight: 500;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col li {
      margin-bottom: 10px;
    }

    .footer-col a {
      font-size: 14px;
      color: var(--ink-soft);
      transition: color .3s;
    }

    .footer-col a:hover {
      color: var(--gold);
    }

    .footer-bottom {
      border-top: 1px solid rgba(232, 165, 71, .1);
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 12px;
      color: var(--ink-mute);
      letter-spacing: .06em;
    }

    @media (max-width: 700px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ANIMATIONS */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .9s var(--ease), transform .9s var(--ease);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* MOBILE MENU */
    .mobile-menu {
      position: fixed;
      inset: 0;
      background: rgba(10, 9, 7, .98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 60;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px);
      transition: all .5s var(--ease);
      pointer-events: none;
    }

    .mobile-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: all;
    }

    .mobile-menu a {
      font-family: var(--serif);
      font-size: 32px;
      color: var(--ink);
      opacity: 0;
      transform: translateY(20px);
      transition: all .6s var(--ease);
    }

    .mobile-menu.open a {
      opacity: 1;
      transform: translateY(0);
    }

    .mobile-menu a:nth-child(2) {
      transition-delay: .1s;
    }

    .mobile-menu a:nth-child(3) {
      transition-delay: .15s;
    }

    .mobile-menu a:nth-child(4) {
      transition-delay: .2s;
    }

    .mobile-menu a:nth-child(5) {
      transition-delay: .25s;
    }

    .mobile-menu a:nth-child(6) {
      transition-delay: .3s;
    }

    .mobile-menu a:hover {
      color: var(--gold);
    }

    /* SR ONLY */

    /* SR ONLY */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .mobile-only {
      display: none !important;
    }

    @media (max-width: 700px) {
      .mobile-only {
        display: block !important;
      }

      .pc-only {
        display: none !important;
      }
    }

    /* MOBILE SPACING OPTIMIZATIONS */
    @media (max-width: 600px) {
      .hero {
        padding: 110px 0 50px !important;
      }

      section {
        padding: 70px 0 !important;
      }

      .section-head {
        margin-bottom: 40px;
      }

      .divider-section {
        padding: 60px 0 !important;
      }

      .planos,
      .para-quem,
      .cta {
        padding: 70px 0 !important;
      }

      .section-head h2 {
        margin-top: 12px;
        font-size: 32px;
      }

      .section-head p {
        margin-top: 16px;
        font-size: 15px;
      }

      .hero-text h1 {
        font-size: 36px;
        line-height: 1.1;
      }

      .hero-text .lede {
        font-size: 16px;
        margin-bottom: 32px;
      }

      .hero-grid {
        gap: 36px !important;
      }

      .metodo-grid {
        gap: 40px !important;
      }

      .pq-grid {
        gap: 20px;
      }

      .footer-grid {
        gap: 28px;
      }

      .metodo-quote {
        margin-top: 32px;
        padding: 20px 24px;
      }

      .metodo-quote q {
        font-size: 18px;
      }

      .plano-card {
        padding: 36px 24px;
      }

      .plano-price .value {
        font-size: 36px;
      }
    }

    /* ==================== V10: RITMO VISUAL E CURSOS ==================== */

    body::before { opacity: .028; }

    section { padding: 104px 0; }

    .section-head { margin-bottom: 56px; }
    .section-head h2 { font-size: clamp(34px, 4.1vw, 52px); }

    /* Fundos alternados para dar respiro entre blocos */
    .cursos { background: linear-gradient(180deg, var(--bg) 0%, #100c08 50%, var(--bg) 100%); }
    .depoimentos { background-attachment: scroll; }

    /* ---- Faixa de números do acervo ---- */
    .acervo-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      max-width: 960px;
      margin: 0 auto 40px;
      padding: 26px 20px;
      border-top: 1px solid rgba(232, 165, 71, .16);
      border-bottom: 1px solid rgba(232, 165, 71, .16);
    }
    .acervo-item { text-align: center; }
    .acervo-item .n {
      display: block;
      font-family: var(--serif);
      font-size: 34px;
      line-height: 1;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .acervo-item .l {
      display: block;
      font-size: 11.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    @media (max-width: 700px) {
      .acervo-strip { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; padding: 22px 8px; }
      .acervo-item .n { font-size: 28px; }
      .acervo-item .l { font-size: 10.5px; letter-spacing: .12em; }
    }

    /* ---- Lista de cursos mais leve e mais estreita ---- */
    .cursos-list { max-width: 960px; margin: 0 auto; gap: 12px; }

    .curso-yt {
      background: rgba(20, 16, 12, .7);
      border: 1px solid rgba(232, 165, 71, .13);
      border-radius: 6px;
    }
    .curso-yt:hover { border-color: rgba(232, 165, 71, .32); }
    .curso-yt.is-open {
      border-color: rgba(232, 165, 71, .45);
      background: rgba(24, 19, 14, .92);
    }

    .curso-yt-body {
      padding: 14px 24px;
      cursor: pointer;
      user-select: none;
      border-top: 1px solid rgba(232, 165, 71, .08);
    }
    .curso-yt-body:hover .curso-toggle { background: rgba(232, 165, 71, .1); }
    .curso-yt-body:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }

    .curso-toggle {
      font-size: 12.5px;
      padding: 8px 18px;
      border-color: rgba(232, 165, 71, .32);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .curso-toggle::after {
      content: '';
      width: 7px; height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      transition: transform .35s var(--ease);
    }
    .curso-yt.is-open .curso-toggle::after { transform: translateY(1px) rotate(-135deg); }

    .curso-info { padding: 0 26px; transition: grid-template-rows .5s var(--ease), padding .5s var(--ease); }
    .curso-info.open { padding-top: 22px; padding-bottom: 32px; }
    .curso-info-inner { padding-top: 0; }

    .modulos { gap: 26px 44px; }
    .modulo-nome {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(232, 165, 71, .12);
      color: var(--gold);
    }
    .modulo-nome span { color: var(--ink-mute); }
    .aulas-full { columns: 2; column-gap: 44px; }
    .aulas-full li { break-inside: avoid; }
    @media (max-width: 860px) { .aulas-full { columns: 1; } }

    .curso-incluso { color: var(--ink-soft); }
    .curso-incluso a { color: var(--gold); border-bottom: 1px solid rgba(232, 165, 71, .4); }

    .acervo-nota {
      text-align: center;
      margin-top: 36px;
      color: var(--ink-mute);
      font-style: italic;
      font-size: 15px;
    }
    .cursos-cta { text-align: center; margin-top: 34px; }

    /* ---- Faixa clara: quebra o peso do preto ---- */
    .light-band {
      background: linear-gradient(180deg, #f3ebdd 0%, #ece0cd 100%);
      color: #33291f;
      position: relative;
    }
    .light-band::before,
    .light-band::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 60px;
      pointer-events: none;
    }
    .light-band::before { top: 0; background: linear-gradient(180deg, rgba(10, 9, 7, .18), transparent); }
    .light-band::after { bottom: 0; background: linear-gradient(0deg, rgba(10, 9, 7, .18), transparent); }
    .light-band .eyebrow { color: #9a6a13; }
    .light-band h2 { color: #2b2218; }
    .light-band h2 .gold { color: #a8741f; }
    .light-band .section-head p { color: #55493b; font-weight: 400; }
    .light-band .divider-rule { background: rgba(168, 116, 31, .3); }

    .pq-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      max-width: 960px;
      margin: 0 auto;
    }
    .pq-card {
      background: rgba(255, 255, 255, .5);
      border: 1px solid rgba(168, 116, 31, .18);
      border-radius: 6px;
      padding: 30px 30px 32px;
    }
    .pq-card-wide { grid-column: 1 / -1; }
    .pq-card h4 {
      font-size: 24px;
      color: #2b2218;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(168, 116, 31, .22);
    }
    .pq-card p { color: #4c4133; font-size: 15.5px; font-weight: 400; line-height: 1.7; }
    @media (max-width: 760px) {
      .pq-cards { grid-template-columns: 1fr; }
      .pq-card { padding: 24px 22px 26px; }
    }

    /* ---- Planos: economia anual ---- */
    .plano-annual strong { color: var(--ink-soft); font-weight: 500; }
    .plano-annual .save {
      display: inline-block;
      margin-top: 8px;
      color: var(--gold);
      background: rgba(232, 165, 71, .1);
      border-radius: 2px;
      padding: 3px 9px;
      font-size: 12px;
      letter-spacing: .03em;
    }

    /* ---- CTA fixo no mobile ---- */
    .sticky-cta {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 90;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
      background: rgba(12, 10, 8, .96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(232, 165, 71, .22);
      transform: translateY(110%);
      transition: transform .45s var(--ease);
    }
    .sticky-cta.visible { transform: translateY(0); }
    .sticky-cta-text { display: flex; flex-direction: column; line-height: 1.25; }
    .sticky-cta-text strong {
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 500;
      color: var(--ink);
    }
    .sticky-cta-text span { font-size: 12px; color: var(--ink-mute); }
    .sticky-cta .btn { padding: 12px 20px; font-size: 12.5px; white-space: nowrap; }
    @media (max-width: 860px) {
      .sticky-cta { display: flex; }
      body { padding-bottom: 0; }
    }

/* ==================== V10.1: ACABAMENTO ESTÉTICO ==================== */

:root {
  --gold-hair: rgba(232, 165, 71, .16);
  --gold-hair-soft: rgba(232, 165, 71, .09);
  --paper: #f4ecdf;
  --paper-2: #ece0cd;
  --ink-paper: #2b2218;
  --ink-paper-soft: #4c4133;
}

body {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(232, 165, 71, .055), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

body::before { opacity: .022; }

h1, h2, h3, h4 { color: var(--ink); }

/* Cabeçalhos de seção com ornamento, o mesmo motivo das capas */
.section-head h2 { letter-spacing: -.018em; }

.section-head::after {
  content: '';
  display: block;
  width: 86px;
  height: 9px;
  margin: 22px auto 0;
  opacity: .75;
  background:
    linear-gradient(90deg, transparent, var(--gold-deep) 22%, transparent 46%) center 4px / 100% 1px no-repeat,
    radial-gradient(circle, var(--gold) 38%, transparent 42%) center / 5px 5px no-repeat,
    linear-gradient(90deg, transparent 54%, var(--gold-deep) 78%, transparent) center 4px / 100% 1px no-repeat;
}

.section-head p { margin-top: 22px; }

/* Molduras mais silenciosas: menos borda, mais luz */
.curso-yt,
.plano-card,
.encontra-card,
.pq-card,
.depo-card {
  border-radius: 8px;
}

.curso-yt {
  border-color: var(--gold-hair-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}

.curso-yt:hover { transform: translateY(-1px); }

.encontra-card { border-color: var(--gold-hair); }

.curso-yt-cover img { filter: saturate(1.04) contrast(1.02); }

/* Botão dourado com leve profundidade em vez de bloco chapado */
.btn-gold {
  background: linear-gradient(180deg, #f0b45c 0%, var(--gold) 55%, #dc9a3c 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 18px -12px rgba(232, 165, 71, .7);
  letter-spacing: .06em;
}

.btn-gold:hover {
  background: linear-gradient(180deg, #f5bf6d 0%, #ecab4f 55%, #e0a044 100%);
}

/* Logo: renderização mais nítida no downscale */
.brand-mark {
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 2px 14px rgba(232, 165, 71, .16));
}

.hero-brand .brand-mark {
  filter: drop-shadow(0 3px 26px rgba(232, 165, 71, .24));
}

/* Ações dentro da gaveta do curso */
.curso-acoes {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--gold-hair-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.curso-acoes .curso-incluso { margin-top: 0; }

.curso-pagina {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border: 1px solid rgba(232, 165, 71, .45);
  border-radius: 3px;
  color: var(--gold);
  font-size: 13.5px;
  letter-spacing: .03em;
  transition: all .3s var(--ease);
}

.curso-pagina::after {
  content: '';
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.curso-pagina:hover {
  background: rgba(232, 165, 71, .1);
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .curso-acoes { flex-direction: column; align-items: flex-start; gap: 14px; }
  .curso-pagina { width: 100%; justify-content: center; }
}

/* ==================== PÁGINAS DE CURSO ==================== */

.pagina-curso { padding-top: 0; }

.curso-hero { padding: 150px 0 60px; }

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 34px;
  transition: color .3s;
}

.voltar::before {
  content: '';
  width: 7px; height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.voltar:hover { color: var(--gold); }

.curso-hero-cover {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gold-hair);
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .9);
}

.curso-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  text-align: center;
}

.curso-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.4vw, 27px);
  color: var(--ink);
  margin: 0;
}

.selo-incluso {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 20px;
  border: 1px solid rgba(232, 165, 71, .34);
  border-radius: 999px;
  background: rgba(232, 165, 71, .07);
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: .05em;
}

.curso-abertura { padding: 84px 0; background: var(--bg-2); }

.curso-prosa { max-width: 780px; margin: 0 auto; }

.curso-prosa h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-style: italic;
  color: var(--gold);
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.18;
}

.curso-prosa p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.82;
  margin-bottom: 22px;
}

.curso-prosa p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 62px;
  line-height: .82;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--gold);
}

.curso-aprender { padding: 96px 0; }

.aprender-wrap { max-width: 880px; margin: 0 auto; }

.aprender-list {
  list-style: none;
  columns: 2;
  column-gap: 46px;
}

.aprender-list li {
  break-inside: avoid;
  position: relative;
  padding: 0 0 16px 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-paper-soft);
}

.aprender-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px; height: 6px;
  border: 1px solid #a8741f;
  transform: rotate(45deg);
}

.curso-grade { padding: 96px 0; background: var(--bg); }

.grade-larga {
  max-width: 960px;
  margin: 0 auto;
  gap: 34px 56px;
}

.curso-paraquem { padding: 96px 0; background: var(--bg-2); }

.paraquem-list { columns: 1; }

.paraquem-list li { font-size: 16px; padding-left: 26px; margin-bottom: 16px; }

.depo-estatico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}

.depo-estatico .depo-card { flex: none; width: auto; }

.curso-fechamento {
  padding: 100px 0 120px;
  background:
    radial-gradient(760px 380px at 50% 0%, rgba(232, 165, 71, .09), transparent 68%),
    var(--bg);
}

.fechamento-box {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 44px;
  border: 1px solid var(--gold-hair);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(28, 24, 18, .8), rgba(14, 11, 8, .8));
}

.fechamento-box h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  margin: 16px 0 22px;
  line-height: 1.14;
}

.fechamento-box > p { color: var(--ink-soft); font-size: 16.5px; }

.fechamento-preco { margin: 32px 0 30px; }

.fechamento-preco .valor {
  font-family: var(--serif);
  font-size: 44px;
  color: var(--gold);
  line-height: 1;
}

.fechamento-preco .por { font-size: 14px; color: var(--ink-soft); margin-left: 4px; }

.fechamento-preco .alt {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-mute);
}

.fechamento-nota {
  margin-top: 26px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mute);
}

@media (max-width: 860px) {
  .depo-estatico { grid-template-columns: 1fr; }
  .aprender-list { columns: 1; }
  .grade-larga { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .curso-hero { padding: 118px 0 40px; }
  .curso-abertura, .curso-aprender, .curso-grade, .curso-paraquem { padding: 66px 0; }
  .fechamento-box { padding: 40px 24px; }
  .curso-prosa p:first-of-type::first-letter { font-size: 48px; }
}

/* Ornamento e legibilidade dentro da faixa clara */
.light-band .section-head::after {
  opacity: 1;
  background:
    linear-gradient(90deg, transparent, #b98229 22%, transparent 46%) center 4px / 100% 1px no-repeat,
    radial-gradient(circle, #a8741f 38%, transparent 42%) center / 5px 5px no-repeat,
    linear-gradient(90deg, transparent 54%, #b98229 78%, transparent) center 4px / 100% 1px no-repeat;
}

.light-band { color: var(--ink-paper-soft); }

/* --------------------------------------------- SELETOR DE VERSÃO */

.tema-switch {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  font-family: var(--sans);
  background: rgba(16, 13, 9, .9);
  border: 1px solid rgba(232, 165, 71, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .8);
}

.tema-switch-label {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a7d68;
  margin-right: 6px;
}

.tema-switch a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e8a547;
  transition: all .3s var(--ease);
}

.tema-switch a:hover { background: rgba(232, 165, 71, .14); }
.tema-switch a.ativo { background: #e8a547; color: #14100c; }

.tema-claro .tema-switch {
  background: rgba(255, 251, 243, .94);
  border-color: rgba(122, 81, 17, .3);
  box-shadow: 0 14px 34px -22px rgba(58, 38, 12, .6);
}

.tema-claro .tema-switch-label { color: #8b7d69; }
.tema-claro .tema-switch a { color: #a5711c; }
.tema-claro .tema-switch a:hover { background: rgba(165, 113, 28, .12); }
.tema-claro .tema-switch a.ativo { background: #a5711c; color: #fff9ec; }

@media (max-width: 860px) {
  .tema-switch {
    left: 50%;
    transform: translateX(-50%);
    bottom: 84px;
    padding: 5px 7px 5px 12px;
  }
  .tema-switch a { padding: 7px 13px; font-size: 10.5px; }
}

/* ==================== V13.1: HERO NO MOBILE ====================
   O retrato em 3/4 ocupava quase uma tela inteira e empurrava o título
   para baixo da dobra. No celular ele vira uma faixa horizontal e passa
   a vir depois do texto, não antes. */

@media (max-width: 860px) {
  .hero-brand { order: 1; }
  .hero-text { order: 2; }
  .hero-image { order: 3; max-width: none; }

  .hero-brand .brand-mark { height: 96px; }
  .hero-brand { margin-bottom: 4px; }

  .hero-grid { gap: 26px !important; }

  .hero-text h1 { font-size: clamp(32px, 8.6vw, 44px); line-height: 1.12; }
  .hero-text .lede { font-size: 16px; margin-top: 18px; }
  .hero-ctas { margin-top: 26px; }

  .hero-image-wrap {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
  }

  .hero-image-wrap img {
    object-position: 50% 12%;
  }

  .hero-image-wrap::after {
    background: linear-gradient(180deg, transparent 52%, rgba(10, 9, 7, .72) 100%);
  }

  /* legenda deixa de flutuar sobre a foto */
  .hero-badge {
    position: static;
    display: block;
    margin: 14px auto 0;
    text-align: center;
    border: none;
    background: none;
    padding: 0;
  }

  .hero-badge .value { font-size: 16px; }
}

@media (max-width: 600px) {
  .hero-brand .brand-mark { height: 84px; }
  .hero-image-wrap { aspect-ratio: 3 / 2; }
}

/* ---- Seletor de versão: menor e fora do caminho no celular ---- */

@media (max-width: 860px) {
  .tema-switch {
    left: 12px;
    right: auto;
    transform: none;
    bottom: calc(84px + env(safe-area-inset-bottom));
    padding: 4px 5px 4px 10px;
    opacity: .82;
  }

  .tema-switch:hover,
  .tema-switch:focus-within { opacity: 1; }

  .tema-switch-label { font-size: 8.5px; letter-spacing: .16em; margin-right: 3px; }
  .tema-switch a { padding: 6px 10px; font-size: 9.5px; letter-spacing: .1em; }
}

/* Especificidade acima dos temas: a legenda do hero não vira caixa no mobile */
@media (max-width: 860px) {
  body.tema-claro .hero-badge,
  body.tema-noturno .hero-badge {
    position: static;
    display: block;
    margin: 14px auto 0;
    text-align: center;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
  }
}

/* ==================== V13.2: LOGO DO HERO NO MOBILE ==================== */

@media (max-width: 860px) {
  .hero-brand {
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 16px;
  }

  .hero-brand .presents { letter-spacing: .26em; }
  .hero-brand .brand-mark { height: 148px; }
}

@media (max-width: 600px) {
  .hero-brand .brand-mark { height: 132px; }
  .hero-brand .presents { font-size: 9.5px; letter-spacing: .22em; }
}

@media (max-width: 380px) {
  .hero-brand .brand-mark { height: 116px; }
}

/* O seletor sobe só quando a barra fixa aparece, para não cobrir links */
@media (max-width: 860px) {
  .tema-switch { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sticky-cta.visible ~ .tema-switch { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ==================== SELO CURSO ESPECIAL ==================== */

.curso-yt-cover,
.curso-hero-cover { position: relative; }

.selo-especial {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  width: 86px;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6));
  transition: transform .4s var(--ease);
  pointer-events: none;
}

.curso-yt:hover .selo-especial { transform: scale(1.04); }

.curso-hero-cover .selo-especial { top: 22px; left: 22px; width: 104px; }

@media (max-width: 860px) {
  .selo-especial { top: 11px; left: 11px; width: 62px; }
  .curso-hero-cover .selo-especial { top: 14px; left: 14px; width: 74px; }
}

@media (max-width: 480px) {
  .selo-especial { top: 9px; left: 9px; width: 54px; }
  .curso-hero-cover .selo-especial { width: 62px; }
}

/* A regra genérica ".curso-yt-cover img { width: 100% }" engolia o selo */
.curso-yt-cover img.selo-especial,
.curso-hero-cover img.selo-especial {
  width: 86px;
  height: auto;
  max-width: 24%;
}

.curso-hero-cover img.selo-especial { width: 104px; max-width: 18%; }

@media (max-width: 860px) {
  .curso-yt-cover img.selo-especial { width: 62px; max-width: 26%; }
  .curso-hero-cover img.selo-especial { width: 74px; max-width: 24%; }
}

@media (max-width: 480px) {
  .curso-yt-cover img.selo-especial { width: 54px; }
  .curso-hero-cover img.selo-especial { width: 62px; }
}

/* ==================== ÂNCORAS E ESTABILIDADE DE LAYOUT ====================
   Dois problemas somados faziam o "Conhecer os planos" parar no lugar errado:
   1. as capas com loading="lazy" não reservavam altura, então a página crescia
      DEPOIS do salto e empurrava a seção de destino para baixo;
   2. o cabeçalho fixo cobria o topo da seção de destino.
   Abaixo, o espaço passa a ser reservado e a âncora ganha folga. */

.curso-yt-cover { aspect-ratio: 1600 / 500; }
.curso-yt-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.curso-hero-cover { aspect-ratio: 1600 / 500; }
.curso-hero-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-image-wrap,
.professor-img-wrap,
.cta-img-wrap { aspect-ratio: 3 / 4; }

.hero-image-wrap img,
.professor-img-wrap img,
.cta-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* O selo não deve herdar o dimensionamento das capas */
.curso-yt-cover img.selo-especial,
.curso-hero-cover img.selo-especial { height: auto; object-fit: contain; }

/* Folga para o cabeçalho fixo em todo destino de âncora */
#academia,
#cursos,
#professor,
#depoimentos,
#planos,
#acesso { scroll-margin-top: 124px; }

@media (max-width: 860px) {
  #academia,
  #cursos,
  #professor,
  #depoimentos,
  #planos,
  #acesso { scroll-margin-top: 100px; }

  .hero-image-wrap { aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
  .hero-image-wrap { aspect-ratio: 3 / 2; }
}