/* =========================================================
   Thais Coelho — Landing pages (shared styles)
   Pure HTML/CSS/JS · easy to edit manually
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
    /* Brand — THAIS palette: plum / rosé / blush / cream */
    --olive:        #633E49;  /* primary brand — deep plum */
    --olive-deep:   #50313A;  /* hover / active */
    --olive-soft:   #9B5F6F;  /* soft variant — mauve rosé */
    --sage:         #9B5F6F;  /* neutral detail — mauve */
    --lime:         #F9D4C4;  /* accent on dark — blush */
    --lime-soft:    #FBE3D8;  /* light blush tint */

    /* Surfaces */
    --ink:          #633E49;  /* deep plum for dark sections */
    --ink-1:        #5A3743;
    --ink-2:        #6E4654;  /* cards on dark */
    --paper:        #FFFFFF;  /* clean white */
    --paper-2:      #F4EFED;  /* warm cream */
    --white:        #FFFFFF;
    --line:         rgba(99, 62, 73, 0.12);
    --line-dark:    rgba(255, 255, 255, 0.14);

    /* Text */
    --text-dark:    #633E49;
    --text-soft:    rgba(99, 62, 73, 0.68);
    --text-mute:    rgba(99, 62, 73, 0.46);
    --text-light:   #FFFFFF;
    --text-light-soft: rgba(255, 255, 255, 0.78);
    --text-light-mute: rgba(255, 255, 255, 0.55);

    /* Type — Fraunces (titles/serif) + Inter (body/UI) */
    --f-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --f-mono:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Motion */
    --ease:      cubic-bezier(.22, .8, .26, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);

    /* Radii */
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-pill: 999px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-dark);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--olive); color: #fff; }

/* ---------- 3. CONTAINERS / SCROLL ---------- */
.container {
    width: 100%;
    max-width: 1280px;
    padding: 0 clamp(20px, 4vw, 48px);
    margin: 0 auto;
}

.scroller {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.scroller::-webkit-scrollbar { width: 0; }
.scroller { scrollbar-width: none; }

.section {
    min-height: 100vh;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(80px, 10vh, 140px) 0 clamp(60px, 8vh, 100px);
    overflow: hidden;
}

.section[data-theme="dark"]  { background: var(--ink); color: var(--text-light); }
.section[data-theme="light"] { background: var(--paper); color: var(--text-dark); }

/* ---------- 4. TYPE ---------- */
.display {
    font-family: var(--f-display);
    font-weight: 500;
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 72;
    font-size: clamp(1.9rem, 3.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    color: inherit;
}
.display em {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--olive-soft);
}
.section[data-theme="dark"] .display em { color: var(--lime); }

.display.center { text-align: center; }

.hero-title {
    font-family: var(--f-display);
    font-weight: 480;
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 96;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 24px 0 48px;
    color: var(--text-light);
}
.hero-title span { display: block; }
.hero-title .hero-kicker {
    display: inline-block;
    font-size: 0.64em;
    font-weight: 460;
    letter-spacing: 0.005em;
}
.hero-title em {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--lime);
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-soft);
    margin-bottom: 28px;
}
.section[data-theme="dark"] .section-tag { color: var(--text-light-soft); }
.tag-line {
    display: block;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.section-head { text-align: center; margin-bottom: clamp(48px, 7vh, 88px); }
.section-head .section-tag { justify-content: center; }
.section-sub {
    max-width: 520px;
    margin: 18px auto 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-soft);
}
.section[data-theme="dark"] .section-sub { color: var(--text-light-soft); }

/* ---------- 5. BUTTONS ---------- */
.btn {
    --bg: var(--olive);
    --fg: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    background: var(--bg);
    color: var(--fg);
    border-radius: var(--r-pill);
    font-family: var(--f-sans);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform .4s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .4s var(--ease);
    will-change: transform;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -18px rgba(155, 95, 111, 0.55);
}
.btn:active { transform: translateY(0); }

.btn-primary {
    --bg: var(--olive);
    --fg: #fff;
    box-shadow: 0 10px 30px -12px rgba(155, 95, 111, 0.45);
}
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s var(--ease);
}
.btn-primary:hover::after { transform: translateX(100%); }

.btn-small  { padding: 11px 18px; font-size: 13px; }
.btn-lg     { padding: 19px 32px; font-size: 15px; }
.btn-magnet { will-change: transform; }

/* Soft orange glow halo — layered on top of any other shadow */
.btn-glow {
    box-shadow:
        0 12px 32px -10px rgba(155, 95, 111, 0.55),
        0 0 48px -8px rgba(155, 95, 111, 0.28);
}
.btn-glow:hover {
    box-shadow:
        0 18px 40px -10px rgba(155, 95, 111, 0.65),
        0 0 64px -8px rgba(155, 95, 111, 0.38);
}

/* ---------- 6. PRELOADER ---------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--ink);
    display: grid;
    place-items: center;
    transition: opacity .6s var(--ease), visibility .6s;
}
.preloader.hidden { opacity: 0; visibility: hidden; }

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.preloader-logo {
    width: 160px;
    opacity: 0;
    animation: pulseIn .6s var(--ease) forwards;
}
.preloader-bar {
    width: 180px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}
.preloader-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--olive), var(--lime));
    animation: loadBar 1.4s var(--ease) forwards;
}
@keyframes pulseIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes loadBar {
    to { width: 100%; }
}

/* ---------- 7. NAV ---------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: 22px 0;
    transition: background .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    padding: 14px 0;
    background: rgba(99, 62, 73, 0.6);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line-dark);
}
.nav.light.scrolled {
    background: rgba(244, 239, 237, 0.82);
    border-bottom-color: var(--line);
}

.nav-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.nav-logo img {
    height: 54px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.nav.light .nav-logo img { filter: none; }

/* On dark sections the nav CTA switches to the blush (light) tone so it never
   blends into the plum background; on light sections it stays deep plum. */
.nav:not(.light) .btn-primary { --bg: var(--lime); --fg: var(--olive); box-shadow: 0 10px 30px -14px rgba(249, 212, 196, 0.5); }
.nav:not(.light) .btn-primary:hover { --bg: var(--lime-soft); }

.nav-menu ul {
    display: flex;
    gap: clamp(20px, 2.4vw, 40px);
}
.nav-menu a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-light-soft);
    transition: color .25s var(--ease);
    position: relative;
}
.nav-menu a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}
.nav-menu a:hover { color: var(--text-light); }
.nav-menu a:hover::after { transform: scaleX(1); }

.nav.light .nav-menu a { color: var(--text-soft); }
.nav.light .nav-menu a:hover { color: var(--text-dark); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
    display: none;
    width: 38px; height: 38px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0;
}
.nav-toggle span {
    display: block;
    width: 20px; height: 1.5px;
    background: currentColor;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    margin: 0 auto;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- 8. SECTION DOTS ---------- */
.section-dots {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: auto;
    color: var(--text-light); /* dark sections: light dots */
}
.section-dots.on-light { color: var(--text-dark); } /* light sections: plum dots */
.section-dots .dot {
    width: 22px; height: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.section-dots .dot span {
    display: block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    transition: all .35s var(--ease);
}
.section-dots .dot:hover span { opacity: 0.7; transform: scale(1.2); }
.section-dots .dot.active span {
    width: 8px; height: 8px;
    opacity: 1;
    background: var(--lime);
    box-shadow: 0 0 0 4px rgba(155, 95, 111, 0.18);
}
.section-dots.on-light .dot span { color: var(--text-dark); }
.section-dots.on-light .dot.active span { background: var(--olive); box-shadow: 0 0 0 4px rgba(155, 95, 111, 0.15); }

/* ---------- 9. CURSOR ---------- */
.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--lime);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9000;
    transform: translate(-50%, -50%);
    transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .3s;
    mix-blend-mode: difference;
    opacity: 0;
}
.cursor-dot.visible { opacity: 1; }
.cursor-dot.hover { width: 36px; height: 36px; background: var(--lime); }
@media (hover: none), (max-width: 768px) {
    .cursor-dot { display: none; }
}

/* ---------- 10. BLOBS / GRAIN ---------- */
.blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.blob {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}
.blob-13 { background: radial-gradient(circle at 50% 50%, #9B5F6F 0%, transparent 60%); top: -20%; left: -10%; width: 55vmax; height: 55vmax; opacity: 0.4; animation: blobFloat2 22s ease-in-out infinite alternate; }
.blob-14 { background: radial-gradient(circle at 50% 50%, #F9D4C4 0%, transparent 60%); bottom: -25%; right: -10%; width: 50vmax; height: 50vmax; opacity: 0.28; animation: blobFloat3 18s ease-in-out infinite alternate; }

@keyframes blobFloat2 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-5%, 4%) scale(1.08); }
    100% { transform: translate(4%, -3%) scale(0.95); }
}
@keyframes blobFloat3 {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); }
    50%  { transform: translate(3%, 3%) scale(1.06) rotate(2deg); }
    100% { transform: translate(-2%, -4%) scale(0.96) rotate(-2deg); }
}

.grain {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ---------- 11. HERO ---------- */
.section-hero { padding-top: clamp(110px, 14vh, 160px); }

.section.section-hero {
    background-color: var(--ink);
}
/* Soft orange blur in the bottom-right — masks the Gemini watermark on the
   source video while reading as ambient brand lighting. Desktop only. */
.section.section-hero::after {
    content: "";
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 32vmax;
    height: 32vmax;
    background: radial-gradient(
        circle at 65% 65%,
        rgba(155, 95, 111, 0.75) 0%,
        rgba(155, 95, 111, 0.4) 30%,
        rgba(155, 95, 111, 0.15) 55%,
        transparent 75%
    );
    filter: blur(50px);
    pointer-events: none;
    z-index: 2;
}
@media (max-width: 768px) {
    .section.section-hero::after { display: none; }
}
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    z-index: 0;
    pointer-events: none;
}
.hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.cta-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(99, 62, 73, 0.96) 0%,
        rgba(99, 62, 73, 0.90) 30%,
        rgba(99, 62, 73, 0.45) 60%,
        rgba(99, 62, 73, 0.05) 85%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 768px) {
    .hero-bg-img { object-position: 72% top; }
    .hero-bg-overlay {
        background: linear-gradient(
            180deg,
            rgba(99, 62, 73, 0.92) 0%,
            rgba(99, 62, 73, 0.86) 55%,
            rgba(99, 62, 73, 0.94) 100%
        );
    }
}
/* Lift blobs above the overlay so the orange ambient still tints the scene */
.section-hero .blobs { z-index: 2; }
.section-hero .hero-grid,
.section-hero .hero-bottom { z-index: 3; }

.hero-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.hero-copy { max-width: 640px; }

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

/* --- Hero badge (live) --- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 13px;
    border-radius: var(--r-pill);
    background: rgba(249, 212, 196, 0.14);
    border: 1px solid rgba(249, 212, 196, 0.32);
    color: var(--lime);
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 0 rgba(249, 212, 196, 0.5);
    animation: heroPulse 2s var(--ease) infinite;
}
@keyframes heroPulse {
    0%   { box-shadow: 0 0 0 0 rgba(249, 212, 196, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(249, 212, 196, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 212, 196, 0); }
}

/* --- Hero feature list --- */
.hero-list {
    display: grid;
    gap: 14px;
    margin: 4px 0 52px;
    max-width: 46ch;
}
.hero-list li {
    position: relative;
    padding-left: 34px;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.4;
    color: var(--text-light-soft);
}
.hero-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lime);
    /* check mark drawn with a mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 14px no-repeat,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 14px no-repeat,
          linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* --- Hero about (short intro text under the hero title) --- */
.hero-about {
    display: grid;
    gap: 2px;
    margin: 4px 0 52px;
    max-width: 52ch;
}
.hero-about p {
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    line-height: 1.6;
    color: var(--text-light-soft);
}
.hero-about-lead {
    font-family: var(--f-display, serif);
    font-size: clamp(1.2rem, 1.7vw, 1.5rem) !important;
    line-height: 1.35 !important;
    color: var(--text-light, #fff) !important;
}

/* --- Hero price --- */
.hero-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 30px;
}
.hero-price-value {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-light);
}
.hero-price-note {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-light-soft);
}

/* --- Accent (blush) button --- */
.btn-accent {
    --bg: var(--lime);
    --fg: var(--olive);
    padding-left: 52px;
    padding-right: 52px;
    font-weight: 600;
    box-shadow: 0 12px 34px -14px rgba(249, 212, 196, 0.6);
}
.btn-accent:hover {
    --bg: var(--lime-soft);
    box-shadow: 0 18px 44px -16px rgba(249, 212, 196, 0.75);
}

/* --- Conteúdo programático (3 columns, vertical/column-major order) --- */
.program-list {
    columns: 3;
    column-gap: clamp(28px, 4vw, 72px);
    max-width: none;
    margin: 0 auto;
}
.program-list li {
    break-inside: avoid;
    position: relative;
    padding: 13px 0 13px 30px;
    border-bottom: 1px solid var(--line);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.35;
    color: var(--text-soft);
}
.program-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--olive-soft);
    border-radius: 2px;
}
@media (max-width: 920px) {
    .program-list { columns: 2; }
}

/* --- Mobile accordion (hidden on desktop) --- */
.program-accordion { display: none; max-width: 560px; margin: 0 auto; }
.program-mod { border-bottom: 1px solid var(--line); }
.program-mod:first-child { border-top: 1px solid var(--line); }
.program-mod-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 4px;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-dark);
}
.program-mod-title {
    flex: 1;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
}
.program-mod-count {
    flex-shrink: 0;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: rgba(155, 95, 111, 0.12);
    color: var(--olive-soft);
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 600;
}
.program-mod-head .chev {
    flex-shrink: 0;
    color: var(--olive-soft);
    transition: transform .35s var(--ease);
}
.program-mod.open .program-mod-head .chev { transform: rotate(180deg); }
.program-mod-list {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s var(--ease);
}
.program-mod.open .program-mod-list { max-height: 620px; }
.program-mod-list li {
    position: relative;
    padding: 9px 0 9px 26px;
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--text-soft);
}
.program-mod-list li:last-child { padding-bottom: 18px; }
.program-mod-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--olive-soft);
    border-radius: 2px;
}

@media (max-width: 700px) {
    .program-list { display: none; }
    .program-accordion { display: block; }
}

/* --- Hero bottom --- */
.hero-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding-bottom: 24px;
}
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light-mute);
    width: max-content;
    margin: 0 auto;
}
.scroll-indicator svg { animation: bounceY 1.8s ease-in-out infinite; }
@keyframes bounceY {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* ---------- 14. CONTEÚDO PROGRAMÁTICO / feature cards ---------- */
.section.section-implementacao {
    background-color: #F4EFED;
}
/* Dark variant (e.g. Diferenciais) — wine background like the Sobre section,
   overriding the light fill above which has equal specificity. */
.section.section-implementacao[data-theme="dark"] {
    background-color: var(--ink);
}
.section.section-implementacao > .container {
    position: relative;
    z-index: 1;
}

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

.agent-svc {
    position: relative;
    padding: 32px 32px 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px -30px rgba(99, 62, 73, 0.14);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s var(--ease);
}
.agent-svc:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -25px rgba(155, 95, 111, 0.22);
    border-color: rgba(155, 95, 111, 0.3);
}

/* Same orange accent system used in Models tracks — top line + corner radial.
   Radial sits under the agent-badge (top-right), giving the number a subtle halo. */
.agent-svc::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--olive), transparent 75%);
    z-index: 2;
}
.agent-svc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(155, 95, 111, 0.07), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.agent-svc > * { position: relative; z-index: 1; }

.agent-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;  /* circle — differentiator vs rounded squares elsewhere */
    background: rgba(155, 95, 111, 0.1);
    color: var(--olive);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.agent-cat {
    display: block;
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--olive);
    margin-bottom: 8px;
}

.agent-svc h3 {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--text-dark);
}

.agent-svc p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-soft);
}

/* Bônus boxes: a bit taller with content vertically centered */
#bonus .agent-svc { min-height: 300px; justify-content: center; }

/* ---------- BÔNUS ESPECIAIS — tabbed: names left, photo + text right ---------- */
.bonus-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

/* Left column — title block, names list and CTA, stacked */
.bonus-tabs-side { display: flex; flex-direction: column; }
.bonus-head { margin-bottom: clamp(24px, 3vw, 36px); }
.bonus-head .section-tag { margin-bottom: 16px; }
.bonus-head .display { margin: 0; }
.bonus-head .section-sub { margin: 14px 0 0; max-width: 40ch; }
.bonus-cta { margin-top: clamp(22px, 3vw, 32px); }

/* Names list */
.bonus-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bonus-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--text-dark);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .3s var(--ease), background .3s var(--ease),
                transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bonus-tab:hover { border-color: rgba(155, 95, 111, 0.4); transform: translateX(3px); }
.bonus-tab:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.bonus-tab-num {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--olive);
    opacity: 0.7;
}
.bonus-tab-name {
    flex: 1;
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.bonus-tab-arrow {
    flex-shrink: 0;
    color: var(--olive);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.bonus-tab.is-active {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
    box-shadow: 0 20px 40px -22px rgba(99, 62, 73, 0.5);
}
.bonus-tab.is-active .bonus-tab-num { color: #fff; opacity: 0.85; }
.bonus-tab.is-active .bonus-tab-arrow { color: #fff; opacity: 1; transform: translateX(0); }

/* Right column — the photo + text panel that swaps on click */
.bonus-tabs-stage { position: relative; }
.bonus-panel[hidden] { display: none; }
.bonus-panel {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px -35px rgba(99, 62, 73, 0.4);
}
.bonus-panel.is-active { animation: bonusPanelIn .5s var(--ease-out) both; }
@keyframes bonusPanelIn {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}
.bonus-panel-img {
    display: block;
    width: 100%;
    aspect-ratio: 945 / 1120;   /* the images' native vertical proportion */
    object-fit: cover;
}
.bonus-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(80, 49, 58, 0.94) 0%,
        rgba(80, 49, 58, 0.5) 40%,
        rgba(80, 49, 58, 0) 72%);
    pointer-events: none;
}
.bonus-panel-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 3vw, 32px);
    color: #fff;
}
.bonus-panel-badge {
    align-self: flex-start;
    margin-bottom: 12px;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(155, 95, 111, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 10px;
    border-radius: 999px;
}
.bonus-panel-text h3 {
    margin: 0 0 10px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.15;
    color: #fff;
}
.bonus-panel-text p {
    margin: 0;
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 760px) {
    .bonus-tabs { grid-template-columns: 1fr; gap: 26px; align-items: stretch; }
    .bonus-tabs-stage { width: 100%; max-width: 340px; margin: 0 auto; }
    .bonus-head { text-align: center; }
    .bonus-head .section-tag { justify-content: center; }
    .bonus-head .section-sub { margin-left: auto; margin-right: auto; }
    .bonus-cta { display: flex; justify-content: center; }
}

/* ---------- DIFERENCIAIS — glassmorphism cards on wine ---------- */
.agents-grid-dif { grid-template-columns: repeat(3, 1fr); }
.agents-grid-dif .agent-svc {
    padding: 28px 24px;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    /* Frosted glass over the wine background */
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.agents-grid-dif .agent-svc:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 32px 60px -28px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Soft blush accent line on top; drop the light-card radial glow */
.agents-grid-dif .agent-svc::before {
    background: linear-gradient(90deg, var(--lime), transparent 75%);
}
.agents-grid-dif .agent-svc::after { display: none; }
/* Icon chip: mauve fill so the white SVG icons read clearly */
.agents-grid-dif .agent-icon {
    margin-bottom: 16px;
    background: rgba(155, 95, 111, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.agents-grid-dif .agent-svc h3 {
    margin: 0 0 8px;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    color: var(--text-light);
}
.agents-grid-dif .agent-svc p {
    color: var(--text-light-soft);
}
@media (max-width: 900px) { .agents-grid-dif { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .agents-grid-dif { grid-template-columns: 1fr; } }

/* ---------- ESTUDOS DE CASO — horizontal scrolling gallery ---------- */
.casos-gallery { position: relative; margin-top: clamp(8px, 2vh, 22px); }
.casos-track {
    display: flex;
    gap: clamp(14px, 2vw, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* extra vertical padding so the card shadow isn't clipped — overflow-x:auto
       forces overflow-y to auto, which would otherwise cut the shadow off. */
    padding: 22px clamp(20px, 6vw, 100px) 46px;
    scrollbar-width: none;
}
.casos-track::-webkit-scrollbar { display: none; }
.caso-slide {
    flex: 0 0 auto;
    width: clamp(280px, 42vw, 520px);
    margin: 0;
    scroll-snap-align: center;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 50px -28px rgba(99, 62, 73, 0.28);
}
.caso-slide img {
    display: block;
    width: 100%;
    height: auto;            /* preserves the original 902×564 proportion */
    aspect-ratio: 902 / 564;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.caso-slide:hover img { transform: scale(1.04); }

/* Caption strip (the white area below each photo) */
.caso-cap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 20px 18px;
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--text-dark);
}
.caso-cap-num {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
}

/* Prev / next controls */
.casos-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--olive);
    cursor: pointer;
    box-shadow: 0 16px 34px -16px rgba(99, 62, 73, 0.4);
    transition: background .3s var(--ease), color .3s var(--ease),
                transform .3s var(--ease), opacity .3s var(--ease);
}
.casos-nav:hover { background: var(--olive); color: #fff; }
.casos-prev { left: clamp(8px, 2vw, 30px); }
.casos-next { right: clamp(8px, 2vw, 30px); }
.casos-nav:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
    .casos-track { padding: 20px 20px 40px; }
    .caso-slide { width: 82vw; }
    .casos-nav { display: none; }
}

/* ---------- FAQ — accordion left, photo right ---------- */
/* The photo (right, fixed height) is the tallest element, so it anchors the
   grid height. The accordion is centered beside it and expands within that
   height — keeping the block vertically centered without shifting on toggle. */
.faq-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
    gap: clamp(36px, 5vw, 80px);
}
.faq-head { margin-bottom: clamp(28px, 4vh, 44px); }
.faq-head .display { margin-top: 0; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    overflow: hidden;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item.is-open {
    border-color: rgba(155, 95, 111, 0.35);
    box-shadow: 0 22px 44px -30px rgba(99, 62, 73, 0.3);
}
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--text-dark);
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.faq-q:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }
.faq-chev {
    flex-shrink: 0;
    color: var(--olive);
    transition: transform .35s var(--ease);
}
.faq-item.is-open .faq-chev { transform: rotate(180deg); }

/* Height is driven by JS (set to the real content height) so it collapses
   fully and animates smoothly with no jump. Starts closed. */
.faq-a {
    height: 0;
    overflow: hidden;
    transition: height .4s var(--ease);
}
.faq-a p {
    margin: 0;
    padding: 0 22px 22px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-soft);
}

.faq-visual {
    position: sticky;
    top: 96px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 40px 70px -40px rgba(99, 62, 73, 0.4);
}
.faq-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 386 / 440;
    object-fit: cover;
}

@media (max-width: 860px) {
    .faq-inner { grid-template-columns: 1fr; gap: 32px; }
    .faq-visual { position: static; order: -1; max-width: 420px; margin: 0 auto; }
}

/* Section CTA (Conteúdo Programático + Bônus) — centered, wine-colored button */
.section-cta { text-align: center; margin-top: clamp(40px, 5vw, 60px); }
.section-cta .btn { --bg: var(--olive); --fg: #fff; }
.section-cta .btn:hover { --bg: var(--olive-deep); }
/* On wine sections the olive button blends into the background — use blush. */
.section[data-theme="dark"] .section-cta .btn { --bg: var(--lime); --fg: var(--olive); }
.section[data-theme="dark"] .section-cta .btn:hover { --bg: var(--lime-soft); }

/* ---------- SOBRE O WORKSHOP (dark / wine) ---------- */
.sobre-inner {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
    position: relative;
    z-index: 2;
}
.sobre-visual {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}
.sobre-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.55);
}
.sobre-copy { max-width: 560px; }
.sobre-copy .display { margin-bottom: 28px; }
.sobre-copy p {
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.7;
    color: var(--text-light-soft);
    margin: 0 0 18px;
}
.sobre-copy p:last-of-type { margin-bottom: 0; }
.sobre-cta { margin-top: 36px; }

@media (max-width: 860px) {
    .sobre-inner { grid-template-columns: 1fr; gap: 36px; }
    .sobre-visual { max-width: 340px; }
    .sobre-copy { max-width: 100%; text-align: center; }
    .sobre-copy .section-tag { justify-content: center; }
    .sobre-cta { display: flex; justify-content: center; }
}

/* ---------- 18. FINALE / FOOTER ---------- */
.section-finale { padding: clamp(80px, 12vh, 140px) 0 16px; }
.finale-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    padding: clamp(20px, 4vh, 56px) 0 clamp(48px, 8vh, 96px);
    position: relative;
    z-index: 2;
}

/* Left visual: base photo with a second photo floating over it */
.finale-visual {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding-top: 30px;
    padding-right: 22px;
}
.finale-photo-main {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.55);
}
.finale-photo-float {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 46%;
    max-width: 210px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 14px;
    border: 6px solid #fff;
    box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.6);
    transform: rotate(3deg);
}

/* Photos ease in when the section reveals. The float keeps rotate(3deg) in
   both states so its tilt is preserved while it gently slides + scales up. */
.finale-photo-main {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
}
.finale-photo-float {
    opacity: 0;
    transform: rotate(3deg) translateY(22px) scale(0.9);
    transition: opacity 1.4s var(--ease-out), transform 1.5s var(--ease-out);
}
[data-section].in-view .finale-photo-main {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: .1s;
}
[data-section].in-view .finale-photo-float {
    opacity: 1;
    transform: rotate(3deg) translateY(0) scale(1);
    transition-delay: .45s;
}
body.loading .finale-photo-main,
body.loading .finale-photo-float { opacity: 0; }

/* Right column: CTA text block (left-aligned, no card) */
.cta-box {
    position: relative;
    z-index: 1;
    max-width: 540px;
    text-align: left;
}
.cta-box > * { position: relative; z-index: 1; }

.cta-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: rgba(155, 95, 111, 0.12);
    border: 1px solid rgba(155, 95, 111, 0.3);
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--lime);
    margin-bottom: 22px;
}

.cta-box .display {
    font-size: clamp(2rem, 3.4vw, 3rem);
    margin: 0 0 22px;
}
.cta-text {
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.6;
    color: var(--text-light-soft);
    max-width: 48ch;
    margin: 0 0 18px;
}
.cta-text-lead {
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    color: var(--text-light);
}

.cta-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 26px 0 clamp(36px, 4vw, 52px);
}
.cta-price-value {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-light);
}
.cta-price-note {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-light-soft);
}

.cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    margin-bottom: 0;
}

/* Footer — dark theme */
.footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line-dark);
    padding-top: 28px;
    padding-bottom: 4px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    margin-bottom: 0;
}
.footer-brand { justify-self: start; }
.footer-copy {
    justify-self: center;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-light-mute);
}
.footer-social { justify-self: end; }
.footer-brand img {
    height: 58px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 0;
}
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 0;
    margin-left: auto;
}
.footer .footer-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-dark);
    color: var(--text-light-soft);
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.footer .footer-social a:hover {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
    transform: translateY(-2px);
}
/* Floating back-to-top button (bottom-right). White so it reads on both the
   dark plum and the light cream sections. */
.back-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 120;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--olive);
    box-shadow: 0 12px 30px -8px rgba(99, 62, 73, 0.45);
    transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.back-top:hover {
    transform: translateY(-3px);
    background: var(--lime);
    box-shadow: 0 18px 40px -10px rgba(99, 62, 73, 0.5);
}

/* ---------- 19. REVEAL ANIMATIONS ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .9s var(--ease-out),
        transform 1s var(--ease-out);
    transition-delay: 0ms;
}
[data-section].in-view [data-reveal] {
    opacity: 1;
    transform: translateY(0);
}
[data-section]:not(.in-view) [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
}

/* Suppress reveals while preloader is visible — JS removes body.loading
   when preloader is gone, then the transition runs as the user sees the hero. */
body.loading [data-section] [data-reveal],
body.loading [data-section].in-view [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
}

/* "Focus-in" reveal: translate + scale + blur. Used by the bonus cards. */
.agent-svc[data-reveal] {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    filter: blur(10px);
    transition:
        opacity 1s var(--ease-out),
        transform 1.1s var(--ease-out),
        filter 1.1s var(--ease-out);
}
[data-section].in-view .agent-svc[data-reveal] {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
[data-section]:not(.in-view) .agent-svc[data-reveal] {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    filter: blur(10px);
}
body.loading [data-section] .agent-svc[data-reveal],
body.loading [data-section].in-view .agent-svc[data-reveal] {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    filter: blur(10px);
}

/* "Zoom-in" reveal: slide up + scale with longer easing — mirrors the CTA
   photo entrance. Used for the section photos / image stages. */
[data-reveal].reveal-zoom {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    transition:
        opacity 1.1s var(--ease-out),
        transform 1.3s var(--ease-out);
}
[data-section].in-view [data-reveal].reveal-zoom {
    opacity: 1;
    transform: translateY(0) scale(1);
}
[data-section]:not(.in-view) [data-reveal].reveal-zoom {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
}
body.loading [data-section] [data-reveal].reveal-zoom,
body.loading [data-section].in-view [data-reveal].reveal-zoom {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .agents-grid { grid-template-columns: 1fr 1fr; }
    .section-dots { display: none; }
}

@media (max-width: 768px) {
    .section { padding: 100px 0 60px; }
    /* Mobile top bar: only the centered logo — no menu, no button, no toggle */
    .nav-menu { display: none; }
    .nav-toggle { display: none; }
    .nav-actions { display: none; }
    .nav-inner { justify-content: center; }
    .footer-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
    }
    .footer-brand, .footer-copy, .footer-social { justify-self: center; }
    .footer-social { margin-left: 0; justify-content: center; }
    .finale-inner { grid-template-columns: 1fr; gap: 48px; }
    .finale-visual { max-width: 380px; }
    .cta-box { max-width: none; }
    .agents-grid { grid-template-columns: 1fr; }
    .scroll-indicator { display: none; }
    .scroller { scroll-snap-type: none; }
    .section { min-height: auto; }
    .hero-title { font-size: clamp(2.2rem, 9vw, 3.4rem); }
    .display { font-size: clamp(2rem, 8vw, 3rem); }
}

@media (max-width: 768px) {
    /* Mobile menu drawer */
    .nav-menu {
        position: fixed;
        inset: 0;
        background: rgba(99, 62, 73, 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 199;
        display: grid;
        place-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s var(--ease), visibility .35s;
    }
    .nav-menu.open {
        display: grid;
        opacity: 1;
        visibility: visible;
    }
    .nav-menu ul {
        flex-direction: column;
        gap: 28px;
        align-items: center;
        text-align: center;
    }
    .nav-menu a {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: clamp(1.5rem, 6vw, 2rem);
        letter-spacing: -0.02em;
        color: var(--text-light);
    }
}

/* ---------- 21. PREFERS REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal],
    [data-reveal].reveal-zoom,
    .agent-svc[data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* =========================================================
   22. CURSOS PAGE (hub) — scoped under .cursos-page so these
   rules never affect the other landing pages that share this file.
   ========================================================= */

/* ---- Nav social icons (this page only) ---- */
.cursos-page .nav-social { display: flex; align-items: center; gap: 10px; }
.cursos-page .nav-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-dark);
    color: var(--text-light-soft);
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.cursos-page .nav-social a:hover {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
    transform: translateY(-2px);
}
/* Over light sections the nav flips to light styling — adapt the pills too */
.cursos-page .nav.light .nav-social a {
    background: rgba(99, 62, 73, 0.04);
    border-color: var(--line);
    color: var(--text-soft);
}
.cursos-page .nav.light .nav-social a:hover {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
}

/* ---- Section CURSOS (course cards grid) ---- */
.cursos-page .section.section-cursos {
    background: #fff;
    justify-content: center;
    overflow: visible;
    padding-top: clamp(120px, 15vh, 170px);
}
.cursos-page .section-cursos .section-head { margin-bottom: clamp(40px, 6vh, 64px); }
.cursos-page .section-cursos .section-sub {
    max-width: 62ch;
    margin: 18px auto 0;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.6;
    color: var(--text-soft);
}

.cursos-page .courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 1.8vw, 26px);
}

.cursos-page .course-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 20px 40px -30px rgba(99, 62, 73, 0.16);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s var(--ease);
}
.cursos-page .course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -25px rgba(155, 95, 111, 0.22);
    border-color: rgba(155, 95, 111, 0.3);
}

.cursos-page .course-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2);
}
.cursos-page .course-media-link { display: block; width: 100%; height: 100%; }
.cursos-page .course-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.cursos-page .course-card:hover .course-media img { transform: scale(1.04); }

.cursos-page .course-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    background: rgba(99, 62, 73, 0.9);
    color: #fff;
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: var(--r-pill);
}

.cursos-page .course-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(22px, 2vw, 28px);
}
.cursos-page .course-body h3 {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--text-dark);
}
.cursos-page .course-desc {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-soft);
}
.cursos-page .course-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 22px;
}
.cursos-page .course-meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-soft);
}
.cursos-page .course-meta svg { color: var(--olive-soft); flex-shrink: 0; }

.cursos-page .course-foot { margin-top: auto; }
.cursos-page .course-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--olive);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 500;
    transition: transform .4s var(--ease), background .25s var(--ease);
}
.cursos-page .course-btn:hover { transform: translateY(-2px); background: var(--olive-deep); }
.cursos-page .course-btn.is-soon {
    background: rgba(99, 62, 73, 0.1);
    color: var(--text-mute);
    cursor: default;
    pointer-events: none;
}
.cursos-page .course-btn.is-soon:hover { transform: none; }

/* ---- Section SOBRE (photo left, text right) ---- */
.cursos-page .section.section-sobre { background: #F4EFED; }
.cursos-page .sobre-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    position: relative;
    z-index: 2;
}
.cursos-page .sobre-visual {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.cursos-page .sobre-photo-main {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 50px 90px -45px rgba(99, 62, 73, 0.5);
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
}
.cursos-page [data-section].in-view .sobre-photo-main {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: .1s;
}
.cursos-page.loading .sobre-photo-main { opacity: 0; }

.cursos-page .sobre-box { position: relative; z-index: 1; max-width: 540px; text-align: left; }
.cursos-page .sobre-box .display { font-size: clamp(2rem, 3.4vw, 3rem); margin: 0 0 20px; }
.cursos-page .sobre-lead {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.12rem, 1.5vw, 1.3rem);
    line-height: 1.4;
    color: var(--olive-soft);
    margin: 0 0 24px;
}
.cursos-page .sobre-text {
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.65;
    color: var(--text-soft);
    max-width: 48ch;
    margin: 0 0 16px;
}
.cursos-page .sobre-text:last-child { margin-bottom: 0; }

/* ---- Section BENEFÍCIOS (dark) ---- */
.cursos-page .beneficios-inner { position: relative; z-index: 2; }
.cursos-page .beneficios-sub {
    max-width: 54ch;
    margin: 18px auto 0;
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.6;
    color: var(--text-light-soft);
}
.cursos-page .beneficios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: clamp(40px, 5vh, 60px);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.cursos-page .beneficio {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-dark);
    border-radius: var(--r-lg);
    transition: transform .5s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.cursos-page .beneficio:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(249, 212, 196, 0.3);
}
.cursos-page .beneficio-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(249, 212, 196, 0.12);
    color: var(--lime);
}
.cursos-page .beneficio p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-light); }
.cursos-page .beneficios-cta {
    text-align: center;
    margin-top: clamp(40px, 5vw, 56px);
    margin-bottom: clamp(48px, 7vh, 80px);
}

@media (max-width: 980px) {
    .cursos-page .courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .cursos-page .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
    .cursos-page .sobre-inner { grid-template-columns: 1fr; gap: 40px; }
    .cursos-page .sobre-visual { max-width: 360px; }
    .cursos-page .sobre-box { max-width: none; }
}
@media (max-width: 600px) {
    .cursos-page .courses-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .cursos-page .beneficios-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
}