:root{--color-dark: #2d2c2a;
--color-dark-soft: #3a3835;
--color-light: #f8f5ef;
--color-white: #ffffff;
--color-beige: #e9dfd0;
--color-gold: #b89968;
--color-gold-dark: #8e7048;
--color-text: #403832;
--color-text-muted: #756c63;
--color-text-light: #f2ecdf;
--color-text-light-muted: #cfc7b9;
--color-border: rgba(64, 56, 50, 0.14);
--color-border-dark: rgba(184, 153, 104, 0.42);
--font-heading: "Playfair Display", Georgia, serif;
--font-body: "Montserrat", Arial, sans-serif;
--container-width: 1240px;
--container-padding: 28px;
--section-space: 88px;
--radius-small: 10px;
--radius-medium: 18px;
--radius-large: 30px;
--radius-pill: 999px;
--shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.09);
--transition: 250ms ease}
*,
*::before,
*::after{box-sizing: border-box}
html{scroll-behavior: smooth}
body,
h1,
h2,
h3,
p{margin: 0}
ul,
ol{margin: 0;
padding: 0;
list-style: none}
img,
svg,
picture,
video{display: block;
max-width: 100%}
button,
input,
textarea,
select{font: inherit}
button{border: 0}
a{color: inherit;
text-decoration: none}
html{font-size: 16px}
body{min-height: 100vh;
overflow-x: hidden;
background: var(--color-light);
color: var(--color-text);
font-family: var(--font-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased}
body.menu-open{overflow: hidden}
h1,
h2,
h3{font-family: var(--font-heading);
font-weight: 500;
line-height: 1.1}
h1{font-size: clamp(2.8rem, 5.2vw, 5.4rem)}
h2{font-size: clamp(2.1rem, 3.8vw, 4rem)}
h3{font-size: clamp(1.65rem, 2.2vw, 2.2rem)}
p{color: var(--color-text-muted)}
a,
button{transition:
color var(--transition),
background-color var(--transition),
border-color var(--transition),
transform var(--transition),
box-shadow var(--transition)}
:focus-visible{outline: 3px solid rgba(184, 153, 104, 0.45);
outline-offset: 4px}
html{scroll-padding-top: 92px}
.scroll-section{scroll-margin-top: 92px}
[data-reveal]{opacity: 1;
transform: none}
body.reveal-enabled [data-reveal]{opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms ease,
transform 700ms ease}
body.reveal-enabled [data-reveal].is-visible{opacity: 1;
transform: translateY(0)}
[data-reveal],
[data-section-reveal]{opacity: 1;
transform: none}
html.scroll-reveal-ready [data-reveal],
html.scroll-reveal-ready [data-section-reveal]{opacity: 0;
visibility: hidden;
will-change: opacity, transform;
transition:
opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms)}
html.scroll-reveal-ready [data-reveal="up"],
html.scroll-reveal-ready [data-section-reveal]{transform: translate3d(0, 42px, 0)}
html.scroll-reveal-ready [data-reveal="left"]{transform: translate3d(-46px, 0, 0)}
html.scroll-reveal-ready [data-reveal="right"]{transform: translate3d(46px, 0, 0)}
html.scroll-reveal-ready [data-reveal="scale"]{transform: scale(0.96)}
html.scroll-reveal-ready [data-reveal].is-visible,
html.scroll-reveal-ready [data-section-reveal].is-visible{opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1)}
html.scroll-reveal-ready [data-section-reveal]{opacity: 0;
visibility: hidden;
transform: translateY(58px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1)}
html.scroll-reveal-ready [data-section-reveal].is-visible{opacity: 1;
visibility: visible;
transform: translateY(0)}
html.scroll-reveal-ready [data-section-reveal].is-visible [data-reveal]{transition-delay: var(--reveal-delay, 0ms)}
.container{width: min(
calc(100% - (var(--container-padding) * 2)),
var(--container-width)
);
margin-inline: auto}
.section{padding-block: var(--section-space)}
.eyebrow{margin-bottom: 16px;
color: var(--color-gold-dark);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase}
.button{display: inline-flex;
min-height: 56px;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 24px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase}
.button:hover{transform: translateY(-2px);
box-shadow: var(--shadow-soft)}
.button-primary{background: #151515;
color: var(--color-white)}
.button-secondary{border-color: var(--color-gold);
color: var(--color-gold-dark)}
.button-light{border-color: rgba(255, 255, 255, 0.42);
color: var(--color-white)}
.badge{display: inline-flex;
width: fit-content;
padding: 6px 11px;
border: 1px solid var(--color-gold);
border-radius: var(--radius-pill);
color: var(--color-gold-dark);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase}
.section-heading{max-width: 790px;
margin-bottom: 48px}
.section-heading h2{margin-bottom: 20px}
.section-heading > p:last-child{max-width: 650px}
.image-placeholder{display: grid;
min-height: 520px;
place-content: center;
gap: 8px;
padding: 30px;
border: 1px solid var(--color-border);
border-radius: var(--radius-large);
background:
linear-gradient(145deg, rgba(184, 153, 104, 0.2), rgba(255, 255, 255, 0.78)),
repeating-linear-gradient(
135deg,
transparent 0 30px,
rgba(64, 56, 50, 0.03) 30px 60px
);
text-align: center}
.image-placeholder strong{font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 500}
.image-placeholder span{color: var(--color-text-muted);
font-size: 0.78rem}
.image-placeholder-dark{border-color: rgba(255, 255, 255, 0.14);
background:
linear-gradient(145deg, rgba(184, 153, 104, 0.18), rgba(255, 255, 255, 0.04)),
repeating-linear-gradient(
135deg,
transparent 0 30px,
rgba(255, 255, 255, 0.025) 30px 60px
);
color: var(--color-text-light)}
.image-placeholder-dark span{color: var(--color-text-light-muted)}
.hero-portrait,
.about-image img{width: 100%;
height: 100%;
object-fit: cover}
.about-image{overflow: hidden;
border-radius: var(--radius-large)}
.about-image img{min-height: 560px;
object-position: center 24%}
.professional-identity{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.professional-identity img{width:68px;height:68px;object-fit:contain;flex:0 0 auto}
.professional-name{color:var(--color-text);font-size:.83rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.professional-name span{font-weight:600}
.professional-role{margin-top:3px;color:var(--color-text-muted);font-size:.75rem}
.course-card-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.course-format{color:var(--color-text-muted);font-size:.68rem;font-weight:600}
.course-card-featured .course-format{color:var(--color-text-light-muted)}
.course-lead{margin-bottom:14px;font-weight:500}
.course-highlights{display:grid;gap:8px;margin-top:22px}
.course-highlights li{position:relative;padding-left:18px;color:var(--color-text-muted);font-size:.78rem}
.course-highlights li::before{content:"•";position:absolute;left:0;color:var(--color-gold)}
.course-card-featured .course-highlights li{color:var(--color-text-light-muted)}
.course-card-action{margin-top:auto;padding-top:28px}
.course-card-action a{margin-top:0;padding-top:0}
.course-card-action small{display:block;max-width:520px;margin-top:10px;color:var(--color-text-muted);font-size:.69rem;line-height:1.55}
.course-card-featured .course-card-action small{color:var(--color-text-light-muted)}
.sales-page-note{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:48px;margin-top:28px;padding:32px;border:1px solid var(--color-border);border-radius:var(--radius-medium);background:var(--color-beige)}
.sales-page-note h3{font-size:clamp(1.5rem,2.4vw,2.15rem)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.choice-card{display:flex;min-height:310px;flex-direction:column;padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-medium);background:var(--color-white)}
.choice-card>span{color:var(--color-gold-dark);font-family:var(--font-heading);font-size:1.05rem}
.choice-card h3{margin-block:30px 16px;font-size:clamp(1.45rem,2vw,1.95rem)}
.choice-card a{width:fit-content;margin-top:auto;padding-top:24px;color:var(--color-gold-dark);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.credentials-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin-top:26px}
.credentials-list li{position:relative;padding-left:18px;color:var(--color-text-light-muted);font-size:.78rem}
.credentials-list li::before{content:"•";position:absolute;left:0;color:var(--color-gold)}
.professional-identity{gap: 12px;
margin-bottom: 24px}
.professional-identity img{width: 54px;
height: 54px}
.professional-name{font-size: 0.73rem}
.professional-role{font-size: 0.72rem}
.section-heading{max-width: 720px;
margin-bottom: 32px}
.section-heading h2{margin-bottom: 12px}
.section-heading > p:last-child{font-size: 0.88rem;
line-height: 1.6}
.course-card-meta{display: block}
.course-format{display: block;
margin-top: 8px;
font-size: 0.62rem}
.course-lead{margin-bottom: 0}
.course-highlights{gap: 6px;
margin-top: 18px}
.course-highlights li{font-size: 0.72rem}
.course-card-action{padding-top: 20px}
.course-card-action small{margin-top: 8px;
font-size: 0.62rem}
.sales-page-note{display: block;
margin-top: 22px;
padding: 18px 24px;
text-align: center}
.sales-page-note p{max-width: 920px;
margin-inline: auto;
font-size: 0.78rem}
.choice-grid{gap: 14px}
.choice-card{min-height: 235px;
padding: 22px}
.choice-card h3{margin-block: 20px 12px;
font-size: clamp(1.2rem, 1.5vw, 1.55rem)}
.choice-card p,
.choice-card a{font-size: 0.72rem}
.about-intro{font-weight: 500}
.credentials-list-detailed{grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 26px}
.credentials-list-detailed li{display: grid;
gap: 4px;
padding-left: 20px}
.credentials-list-detailed li::before{content: "✦";
top: 1px;
font-size: 0.72rem}
.credentials-list-detailed strong{color: var(--color-text-light);
font-size: 0.78rem;
line-height: 1.45}
.credentials-list-detailed span{color: var(--color-text-light-muted);
font-size: 0.7rem;
line-height: 1.55}
.course-card-action a{display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 11px 16px;
border: 1px solid var(--color-gold);
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-gold-dark);
transition:
background-color var(--transition),
color var(--transition),
transform var(--transition),
box-shadow var(--transition)}
.course-card-featured .course-card-action a{color: var(--color-gold)}
.course-card-action a:hover{background: var(--color-gold);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(184, 153, 104, 0.24)}
.course-card-featured .course-card-action a:hover{color: #1b1b1b}
.courses-title{max-width: 760px;
font-size: clamp(1.95rem, 3.2vw, 3.5rem)}
.about-title{max-width: 720px;
font-size: clamp(2rem, 3.2vw, 3.45rem)}
.contact-benefits{display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
margin-top: 24px}
.contact-benefits li{position: relative;
padding-left: 18px;
color: var(--color-text-muted);
font-size: 0.8rem}
.contact-benefits li::before{content: "•";
position: absolute;
left: 0;
color: var(--color-gold-dark)}
.contact-details{margin-top: 24px}
.contact-details p{font-size: 0.84rem}
.contact-details a{color: var(--color-gold-dark);
font-weight: 700}
.contact-details a:hover{text-decoration: underline}
.contact-actions{display: flex;
min-width: 260px;
flex-direction: column;
gap: 14px}
.contact-primary-button{box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16)}
.courses-section .courses-title{max-width: 1120px;
margin-bottom: 10px;
font-size: clamp(2.45rem, 4.15vw, 4.2rem);
line-height: 1.02}
.courses-section .section-heading > p:last-child{max-width: 760px;
font-size: 0.84rem;
line-height: 1.5}
.courses-section .course-card{padding: 24px 24px 20px}
.courses-section .course-card h3{margin-block: 26px 12px;
font-size: clamp(1.85rem, 2.5vw, 2.6rem)}
.courses-section .course-card p{font-size: 0.78rem; line-height: 1.5}
.courses-section .course-highlights{margin-top: 16px; gap: 5px}
.courses-section .course-highlights li{font-size: 0.69rem}
.courses-section .course-card-action{padding-top: 18px}
.courses-section .course-card-action a{min-height: 40px;
padding: 9px 14px;
font-size: 0.66rem}
.courses-section .course-card-action small{margin-top: 7px;
font-size: 0.59rem;
line-height: 1.4}
.courses-section .sales-page-note{margin-top: 18px; padding: 14px 20px}
.courses-section .sales-page-note p{font-size: 0.72rem; line-height: 1.45}
.about-section .eyebrow{margin-bottom: 10px}
.about-section .about-title{max-width: 760px;
margin-bottom: 18px;
font-size: clamp(2.35rem, 4.1vw, 4.35rem);
line-height: 1.03}
.about-section .about-intro,
.about-section .about-content > p:not(.eyebrow){font-size: 0.82rem;
line-height: 1.52}
.about-section .about-content > p + p{margin-top: 12px}
.about-section .credentials-list-detailed{grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 22px;
margin-top: 18px}
.about-section .credentials-list-detailed li{gap: 2px;
padding-left: 17px}
.about-section .credentials-list-detailed strong{font-size: 0.71rem;
line-height: 1.34}
.about-section .credentials-list-detailed span{font-size: 0.63rem;
line-height: 1.42}
.about-section .about-content .button{min-height: 48px;
margin-top: 24px;
padding: 10px 18px 10px 24px;
font-size: 0.72rem}
.courses-section .courses-title{max-width: 980px;
font-size: clamp(2.15rem, 3.55vw, 3.65rem);
line-height: 1.01}
.courses-section .section-heading{margin-bottom: 16px}
.courses-section .section-heading > p:last-child{max-width: 720px;
font-size: 0.8rem}
.courses-section .course-card{padding: 20px 22px 18px}
.courses-section .course-card h3{margin-block: 22px 10px;
font-size: clamp(1.75rem, 2.25vw, 2.35rem)}
.courses-section .course-card p{font-size: 0.74rem;
line-height: 1.44}
.courses-section .course-highlights{margin-top: 13px;
gap: 4px}
.courses-section .course-highlights li{font-size: 0.65rem}
.courses-section .course-card-action{padding-top: 14px}
.courses-section .course-card-action a{min-height: 38px;
padding: 8px 13px;
font-size: 0.63rem}
.courses-section .course-card-action small{margin-top: 6px;
font-size: 0.56rem;
line-height: 1.35}
.courses-section .sales-page-note{margin-top: 12px;
padding: 11px 18px}
.courses-section .sales-page-note p{font-size: 0.67rem;
line-height: 1.35}
.footer-simple{display: grid;
justify-items: center;
gap: 8px;
padding-block: 54px 34px;
text-align: center}
.footer-divider{width: min(100%, 760px);
height: 1px;
margin-bottom: 20px;
background: rgba(184, 153, 104, 0.45)}
.footer-simple p{color: rgba(242, 236, 223, 0.78);
font-size: 0.76rem;
letter-spacing: 0.03em}
.contact-to-footer .contact-card{margin-bottom: 0}
.contact-wrapper{display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
gap: 22px;
align-items: stretch}
.contact-community-card,
.contact-support-card{border: 1px solid rgba(184, 153, 104, 0.22);
border-radius: var(--radius-large);
background: linear-gradient(145deg, #fffdf9, #f8f2e8);
box-shadow: var(--shadow-soft)}
.contact-community-card{display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 34px;
align-items: center;
padding: clamp(34px, 5vw, 58px)}
.contact-community-copy{max-width: 760px}
.contact-community-card .contact-primary-button{min-width: 250px}
.contact-support-card{display: flex;
flex-direction: column;
justify-content: center;
padding: 34px}
.contact-support-icon{display: grid;
width: 52px;
height: 52px;
place-items: center;
margin-bottom: 20px;
border-radius: 50%;
background: rgba(184, 153, 104, 0.12);
color: var(--color-gold-dark)}
.contact-support-icon svg,
.whatsapp-contact-icon svg{width: 28px;
height: 28px;
fill: currentColor}
.contact-support-card h3{margin-bottom: 14px;
font-size: clamp(1.65rem, 2.4vw, 2.25rem)}
.contact-support-card > p:not(.eyebrow):not(.contact-support-note){font-size: 0.84rem;
line-height: 1.6}
.whatsapp-contact{display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
margin-top: 24px;
padding: 15px 18px;
border: 1px solid rgba(184, 153, 104, 0.55);
border-radius: 18px;
background: #ffffff;
color: var(--color-text);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08)}
.whatsapp-contact:hover{transform: translateY(-3px);
border-color: var(--color-gold);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12)}
.whatsapp-contact-icon{display: grid;
width: 44px;
height: 44px;
place-items: center;
border-radius: 50%;
background: #25d366;
color: #ffffff}
.whatsapp-contact small,
.whatsapp-contact strong{display: block}
.whatsapp-contact small{margin-bottom: 3px;
color: var(--color-text-muted);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase}
.whatsapp-contact strong{color: var(--color-text);
font-size: 0.98rem}
.whatsapp-contact-arrow{color: var(--color-gold-dark);
font-size: 1.3rem}
.contact-support-note{margin-top: 12px;
color: var(--color-text-muted);
font-size: 0.7rem}
.contact-wrapper{grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
gap: 18px;
align-items: stretch}
.contact-community-card,
.contact-support-card{min-height: 0}
.contact-community-card{grid-template-columns: minmax(0, 1fr) 250px;
gap: 28px;
align-items: center;
padding: 34px 38px}
.contact-community-card h2{margin-bottom: 12px;
font-size: clamp(2.35rem, 4vw, 4.25rem);
line-height: 1.02}
.contact-community-card .contact-community-copy > p:not(.eyebrow){max-width: 700px;
font-size: 0.9rem;
line-height: 1.55}
.contact-community-card .contact-benefits{margin-top: 18px;
gap: 8px 16px}
.contact-community-card .contact-primary-button{min-width: 0;
width: 100%}
.contact-support-card{padding: 30px}
.contact-support-card .contact-support-icon{width: 46px;
height: 46px;
margin-bottom: 14px}
.contact-support-card .eyebrow{margin-bottom: 10px}
.contact-support-card h3{margin-bottom: 12px;
font-size: clamp(1.8rem, 2.8vw, 2.7rem);
line-height: 1.08}
.contact-support-card > p:not(.eyebrow):not(.contact-support-note){font-size: 0.8rem;
line-height: 1.5}
.whatsapp-contact{margin-top: 18px;
padding: 13px 15px}
.contact-support-note{margin-top: 10px;
font-size: 0.72rem}
.contact-screen-stable .contact-wrapper{align-items: stretch}
.contact-screen-stable .contact-community-card,
.contact-screen-stable .contact-support-card{min-height: 410px}
.contact-screen-stable .contact-community-card{padding: 38px 40px}
.contact-screen-stable .contact-support-card{padding: 34px}
.contact-screen-stable .contact-community-card h2{margin-bottom: 12px}
.contact-screen-stable .contact-benefits{margin-top: 18px}
.courses-section .course-card{position: relative;
overflow: hidden;
transform: translateZ(0);
transition:
transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 280ms ease,
background-color 280ms ease}
.courses-section .course-card::after{content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background:
radial-gradient(
circle at 80% 12%,
rgba(184, 153, 104, 0.16),
transparent 34%
);
opacity: 0;
pointer-events: none;
transition: opacity 280ms ease}
.courses-section .course-card > *{position: relative;
z-index: 1}
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{z-index: 3;
transform: translateY(-10px) scale(1.025);
border-color: rgba(184, 153, 104, 0.72);
box-shadow:
0 22px 48px rgba(45, 40, 35, 0.16),
0 8px 20px rgba(184, 153, 104, 0.12)}
.courses-section .course-card:hover::after,
.courses-section .course-card:focus-within::after{opacity: 1}
.courses-section .course-card .badge{transition:
transform 240ms ease,
background-color 240ms ease,
color 240ms ease,
border-color 240ms ease}
.courses-section .course-card:hover .badge,
.courses-section .course-card:focus-within .badge{transform: translateY(-2px) scale(1.04);
background: var(--color-gold);
color: var(--color-white);
border-color: var(--color-gold)}
.courses-section .course-card-action a{position: relative;
overflow: hidden;
isolation: isolate;
transition:
color 240ms ease,
background-color 240ms ease,
border-color 240ms ease,
transform 240ms ease,
box-shadow 240ms ease}
.courses-section .course-card-action a::before{content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, 0.38) 45%,
transparent 75%
);
transform: translateX(-120%);
transition: transform 520ms ease}
.courses-section .course-card:hover .course-card-action a,
.courses-section .course-card:focus-within .course-card-action a{background: var(--color-gold);
color: #ffffff;
border-color: var(--color-gold);
transform: translateY(-2px);
box-shadow:
0 12px 24px rgba(184, 153, 104, 0.28),
0 0 0 4px rgba(184, 153, 104, 0.10)}
.courses-section .course-card:hover .course-card-action a::before,
.courses-section .course-card:focus-within .course-card-action a::before{transform: translateX(120%)}
.courses-section .course-card-featured:hover .course-card-action a,
.courses-section .course-card-featured:focus-within .course-card-action a{color: #1b1b1b}
.courses-section .course-card h3{transition:
color 240ms ease,
transform 240ms ease}
.courses-section .course-card:hover h3,
.courses-section .course-card:focus-within h3{color: var(--color-gold-dark);
transform: translateY(-2px)}
.courses-section .course-card-featured:hover h3,
.courses-section .course-card-featured:focus-within h3{color: var(--color-gold)}
.courses-grid{position: relative}
.courses-grid:has(.course-card:hover) .course-card:not(:hover),
.courses-grid:has(.course-card:focus-within) .course-card:not(:focus-within){opacity: 0.58;
transform: scale(0.965);
filter: saturate(0.72) brightness(0.98);
box-shadow: none}
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{z-index: 5;
transform: translateY(-14px) scale(1.055);
opacity: 1;
filter: none;
border-color: rgba(184, 153, 104, 0.92);
box-shadow:
0 30px 64px rgba(45, 40, 35, 0.22),
0 12px 28px rgba(184, 153, 104, 0.18)}
.courses-section .course-card:hover::after,
.courses-section .course-card:focus-within::after{opacity: 1}
.courses-section .course-card:hover .course-card-action a,
.courses-section .course-card:focus-within .course-card-action a{transform: translateY(-3px) scale(1.03);
box-shadow:
0 16px 30px rgba(184, 153, 104, 0.34),
0 0 0 5px rgba(184, 153, 104, 0.12)}
.courses-section .course-card-action a span,
.courses-section .course-card-action a::after{transition: transform 240ms ease}
.courses-section .course-card:hover .course-card-action a,
.courses-section .course-card:focus-within .course-card-action a{letter-spacing: 0.075em}
.courses-section .course-card:hover .course-card-action a::before,
.courses-section .course-card:focus-within .course-card-action a::before{transform: translateX(140%)}
.courses-section .course-card{transition:
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 260ms ease,
filter 260ms ease,
box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 260ms ease,
background-color 260ms ease}
.courses-grid:has(.course-card:hover) .course-card:not(:hover),
.courses-grid:has(.course-card:focus-within) .course-card:not(:focus-within){opacity: 0.82;
transform: scale(0.982);
filter: saturate(0.88) brightness(0.995)}
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{transform: translateY(-12px) scale(1.05);
box-shadow:
0 28px 58px rgba(45, 40, 35, 0.18),
0 12px 28px rgba(184, 153, 104, 0.14)}
.courses-section .course-card:hover::after,
.courses-section .course-card:focus-within::after{opacity: 0.72}
.courses-section .course-card:hover h3,
.courses-section .course-card:focus-within h3{color: var(--color-gold-dark);
transform: translateY(-2px)}
.courses-section .course-card-featured:hover h3,
.courses-section .course-card-featured:focus-within h3{color: var(--color-gold)}
.courses-section .course-card-action a{transform-origin: center}
.courses-section .course-card:hover .course-card-action a,
.courses-section .course-card:focus-within .course-card-action a{transform: translateY(-3px) scale(1.02);
box-shadow:
0 14px 28px rgba(184, 153, 104, 0.28),
0 0 0 4px rgba(184, 153, 104, 0.09)}
.courses-section .course-card-action a{padding-right: 18px}
.courses-section .course-card-action a{transition:
color 240ms ease,
background-color 240ms ease,
border-color 240ms ease,
transform 240ms ease,
box-shadow 240ms ease,
letter-spacing 240ms ease}
.courses-section .course-card:hover .course-card-action a,
.courses-section .course-card:focus-within .course-card-action a{letter-spacing: 0.08em}
.courses-section .course-card:hover .course-card-action a::before,
.courses-section .course-card:focus-within .course-card-action a::before{transform: translateX(135%)}
.courses-grid .course-card{backface-visibility: hidden}
.choice-grid{position: relative}
.choice-card{position: relative;
display: flex;
min-height: 100%;
flex-direction: column;
overflow: hidden;
transform: translateZ(0);
transition:
transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 260ms ease,
filter 260ms ease,
border-color 260ms ease,
box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1)}
.choice-card::after{content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background:
radial-gradient(
circle at 82% 14%,
rgba(184, 153, 104, 0.14),
transparent 36%
);
opacity: 0;
pointer-events: none;
transition: opacity 260ms ease}
.choice-card > *{position: relative;
z-index: 1}
.choice-card-button{display: inline-flex;
width: fit-content;
min-height: 40px;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 22px;
padding: 10px 18px;
border: 1px solid var(--color-gold);
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-gold-dark);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.065em;
text-transform: uppercase;
transition:
background-color 240ms ease,
color 240ms ease,
border-color 240ms ease,
transform 240ms ease,
box-shadow 240ms ease,
letter-spacing 240ms ease}
.choice-card-button span{font-size: 1rem;
transition: transform 240ms ease}
.choice-card:hover,
.choice-card:focus-within{z-index: 3;
transform: translateY(-8px) scale(1.025);
border-color: rgba(184, 153, 104, 0.78);
box-shadow:
0 22px 46px rgba(45, 40, 35, 0.14),
0 8px 20px rgba(184, 153, 104, 0.12)}
.choice-card:hover::after,
.choice-card:focus-within::after{opacity: 1}
.choice-card:hover .choice-card-button,
.choice-card:focus-within .choice-card-button{background: var(--color-gold);
color: #ffffff;
border-color: var(--color-gold);
transform: translateY(-2px) scale(1.02);
letter-spacing: 0.075em;
box-shadow:
0 13px 26px rgba(184, 153, 104, 0.28),
0 0 0 4px rgba(184, 153, 104, 0.09)}
.choice-card:hover .choice-card-button span,
.choice-card:focus-within .choice-card-button span{transform: translateX(5px)}
.choice-grid:has(.choice-card:hover) .choice-card:not(:hover),
.choice-grid:has(.choice-card:focus-within) .choice-card:not(:focus-within){opacity: 0.78;
transform: scale(0.985);
filter: saturate(0.86);
box-shadow: none}
.choice-card-button{width:auto;
max-width:240px}
.choice-card-button span{font-size:.85rem}
.site-header{position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--color-border);
background: rgba(248, 245, 239, 0.94);
backdrop-filter: blur(14px)}
.header-content{display: flex;
min-height: 78px;
align-items: center;
justify-content: space-between;
gap: 28px}
.brand{display: inline-flex;
align-items: center;
gap: 13px}
.brand-symbol{display: grid;
width: 52px;
height: 52px;
place-items: center;
overflow: hidden;
border-radius: 50%}
.brand-symbol img{width: 100%;
height: 100%;
object-fit: contain}
.brand-text{display: grid;
line-height: 1.25}
.brand-text strong{font-family: var(--font-heading);
font-size: 1rem}
.brand-text small{color: var(--color-text-muted);
font-size: 0.68rem}
.site-navigation{display: flex;
align-items: center;
gap: 26px;
font-size: 0.8rem;
font-weight: 600}
.site-navigation a:hover{color: var(--color-gold-dark)}
.menu-button{display: none;
width: 44px;
height: 44px;
padding: 10px;
border-radius: 50%;
background: transparent;
cursor: pointer}
.menu-button span{display: block;
width: 100%;
height: 1px;
margin-block: 6px;
background: var(--color-text)}
.hero{min-height: calc(100vh - 78px);
display: flex;
align-items: center;
background:
radial-gradient(
circle at 86% 20%,
rgba(184, 153, 104, 0.16),
transparent 30%
),
var(--color-light)}
.hero-grid{display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
align-items: center;
gap: clamp(48px, 7vw, 100px)}
.hero-content h1{max-width: 760px;
margin-bottom: 26px;
letter-spacing: -0.03em}
.hero-content h1 span{display: block;
margin-top: 8px;
color: var(--color-gold-dark)}
.hero-description{max-width: 650px;
font-size: 1.06rem}
.hero-actions{display: flex;
gap: 16px;
margin-top: 34px;
flex-wrap: wrap}
.hero-image{position: relative;
width: min(100%, 470px);
justify-self: end;
overflow: visible}
.hero-portrait{position: relative;
z-index: 2;
display: block;
aspect-ratio: 4 / 5;
border-radius: 96px 16px 96px 16px;
box-shadow: var(--shadow-soft);
object-position: center 18%}
.hero-seal{position: absolute;
z-index: 1;
top: -58px;
right: -82px;
width: clamp(170px, 17vw, 250px);
opacity: 0.16;
animation: rotate-seal 36s linear infinite;
pointer-events: none}
@keyframes rotate-seal{to{transform: rotate(360deg)}
}
.courses-section{background: var(--color-white)}
.courses-grid{display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px}
.course-card{display: flex;
min-height: 350px;
flex-direction: column;
padding: 34px;
border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
background: var(--color-white)}
.course-card:hover{transform: translateY(-4px);
border-color: var(--color-gold);
box-shadow: var(--shadow-soft)}
.course-card-featured{background: var(--color-dark);
color: var(--color-text-light)}
.course-card-featured p{color: var(--color-text-light-muted)}
.course-card h3{margin-block: 38px 18px}
.course-card p{max-width: 540px}
.course-card a{width: fit-content;
margin-top: auto;
padding-top: 30px;
color: var(--color-gold-dark);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase}
.course-card-featured a{color: var(--color-gold)}
.about-section{background: var(--color-dark);
color: var(--color-text-light)}
.about-grid{display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
gap: clamp(48px, 8vw, 110px)}
.about-content h2{margin-bottom: 24px}
.about-content > p:not(.eyebrow){max-width: 690px;
color: var(--color-text-light-muted)}
.about-content > p + p{margin-top: 18px}
.about-content .button{margin-top: 34px}
.contact-section{background: var(--color-beige)}
.contact-card{display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
padding: clamp(34px, 6vw, 64px);
border-radius: var(--radius-large);
background: var(--color-white);
box-shadow: var(--shadow-soft)}
.contact-card h2{margin-bottom: 14px}
.contact-card p:not(.eyebrow){max-width: 650px}
.site-footer{padding-block: 54px 24px;
background: #1b1b1a;
color: var(--color-text-light)}
.footer-content{display: flex;
justify-content: space-between;
gap: 34px;
padding-bottom: 38px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1)}
.footer-content strong{font-family: var(--font-heading);
font-size: 1.4rem}
.footer-content p{margin-top: 6px;
color: var(--color-text-light-muted)}
.footer-links{display: flex;
align-items: flex-start;
gap: 22px}
.footer-links a{color: var(--color-text-light-muted);
font-size: 0.8rem}
.footer-bottom{display: flex;
justify-content: space-between;
gap: 18px;
padding-top: 22px;
color: rgba(242, 236, 223, 0.55);
font-size: 0.68rem}
.choice-section{background:var(--color-light)}
.hero{min-height: auto;
padding-block: 48px 42px}
.hero-grid{grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
gap: clamp(36px, 5vw, 72px)}
.hero-content h1{max-width: 690px;
margin-bottom: 20px;
font-size: clamp(2.65rem, 4.5vw, 4.65rem)}
.hero-description{max-width: 590px;
font-size: 0.98rem}
.hero-actions{margin-top: 26px}
.hero-image{width: min(100%, 390px)}
.hero-portrait{aspect-ratio: 4 / 5;
border-radius: 76px 14px 76px 14px;
object-position: center 18%}
.hero-seal{top: -18px;
right: -18px;
width: 128px;
opacity: 0.94;
z-index: 5;
filter:
saturate(1.05)
contrast(1.04)
drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16))}
.courses-section{padding-top: 66px}
.courses-grid{grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px}
.course-card{min-height: 430px;
padding: 24px}
.course-card h3{margin-block: 28px 14px}
.course-card p{font-size: 0.82rem;
line-height: 1.55}
.course-card a{font-size: 0.69rem}
.about-grid{gap: clamp(34px, 5vw, 72px)}
.hero-seal{width: 128px;
height: 128px;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center;
border-radius: 50%;
transform-origin: center}
.about-section{overflow: hidden}
.about-grid{align-items: start}
.about-content{max-width: 760px}
.about-content > p:not(.eyebrow){font-size: 0.9rem;
line-height: 1.58}
.credentials-list-detailed{max-height: 390px;
overflow: auto;
padding-right: 8px}
.contact-section{background:
radial-gradient(circle at 85% 20%, rgba(184, 153, 104, 0.14), transparent 30%),
var(--color-beige)}
.contact-card{border: 1px solid rgba(184, 153, 104, 0.22);
background: linear-gradient(145deg, #fffdf9, #f8f2e8)}
.contact-copy{max-width: 760px}
.courses-section{min-height: calc(100vh - 82px);
display: flex;
align-items: flex-start;
padding-block: 22px 24px;
scroll-margin-top: 82px}
.courses-section > .container{width: min(calc(100% - (var(--container-padding) * 2)), 1340px)}
.courses-section .section-heading{margin-bottom: 22px}
.courses-section .courses-grid{align-items: stretch}
.courses-section .course-card{min-height: 0}
.about-section{min-height: calc(100vh - 82px);
display: flex;
align-items: center;
padding-block: 22px 24px;
scroll-margin-top: 82px}
.about-section > .container{width: min(
calc(100% - (var(--container-padding) * 2)),
1360px
)}
.about-section .about-grid{grid-template-columns: minmax(360px, 0.84fr) minmax(0, 1.16fr);
align-items: center;
gap: clamp(34px, 5vw, 76px)}
.about-section .about-image{max-height: calc(100vh - 142px)}
.about-section .about-image img{min-height: 0;
height: min(660px, calc(100vh - 142px));
object-fit: cover;
object-position: center 22%}
.about-section .about-content{max-width: none}
.about-section .credentials-list-detailed{max-height: none;
overflow: visible;
padding-right: 0}
.courses-section{padding-block: 14px 16px}
.courses-section .courses-grid{gap: 14px}
.contact-to-footer{min-height: calc(100vh - 82px);
display: flex;
align-items: center;
padding-block: 34px 28px;
scroll-margin-top: 82px}
.contact-to-footer + .site-footer{margin-top: 0}
.site-footer{padding-block: 0;
background:
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.015) 0 26px,
transparent 26px 52px
),
#2d2c2a}
.contact-to-footer{align-items: flex-start;
padding-block: 26px 24px}
.contact-to-footer{min-height: auto;
display: block;
padding-block: 28px 22px}
.contact-to-footer .contact-wrapper{width: min(
calc(100% - (var(--container-padding) * 2)),
1180px
);
margin-inline: auto}
.contact-to-footer + .site-footer{margin-top: 0}
.contact-screen-stable{min-height: calc(100vh - 82px - 150px);
display: flex;
align-items: center;
padding-block: 44px 36px;
scroll-margin-top: 82px}
.contact-screen-stable .contact-wrapper{width: min(
calc(100% - (var(--container-padding) * 2)),
1180px
);
margin-inline: auto}
.contact-screen-stable + .site-footer{min-height: 150px;
margin-top: 0}
.hero-seal{padding: 8px;
background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(184, 153, 104, 0.58);
border-radius: 50%;
box-shadow:
0 10px 24px rgba(45, 40, 35, 0.14),
0 0 0 4px rgba(255, 255, 255, 0.22);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px)}
.hero-portrait{border: 1.5px solid rgba(184, 153, 104, 0.68);
box-shadow:
0 18px 40px rgba(45, 40, 35, 0.13),
0 0 0 5px rgba(255, 255, 255, 0.52)}
.about-image img{border: 1.5px solid rgba(184, 153, 104, 0.68);
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.22),
0 0 0 5px rgba(255, 255, 255, 0.08)}
@media (max-width: 900px){:root{--container-padding: 22px;
--section-space: 68px}
.menu-button{display: block;
position: relative;
z-index: 102}
.site-navigation{position: fixed;
inset: 0;
z-index: 101;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 8px;
padding: 88px 26px 32px;
background: rgba(248, 245, 239, 0.98);
opacity: 0;
pointer-events: none;
transform: translateY(-12px)}
.site-navigation.is-open{opacity: 1;
pointer-events: auto;
transform: translateY(0)}
.site-navigation a{padding: 16px 0;
border-bottom: 1px solid var(--color-border);
font-size: 1rem}
.hero{min-height: auto}
.hero-grid,
.about-grid{grid-template-columns: 1fr}
.hero-image,
.about-image{max-width: 620px}
.hero-image{justify-self: center}
.hero-seal{right: -42px}
.courses-grid{grid-template-columns: 1fr}
.contact-card{align-items: flex-start;
flex-direction: column}
.footer-content,
.footer-bottom{flex-direction: column}
}
@media (max-width: 560px){:root{--container-padding: 17px;
--section-space: 52px}
.header-content{min-height: 70px}
.brand-text small{display: none}
.hero{padding-top: 36px}
.hero-actions{flex-direction: column}
.button{width: 100%}
.hero-image{width: min(100%, 360px)}
.hero-portrait{border-radius: 54px 12px 54px 12px}
.hero-seal{top: -34px;
right: -22px;
width: 150px;
opacity: 0.13}
.image-placeholder{min-height: 390px;
padding: 22px}
.course-card{min-height: 290px;
padding: 26px}
.contact-card{padding: 28px 22px}
.footer-links{flex-direction: column;
gap: 10px}
}
@media (prefers-reduced-motion: reduce){.hero-seal{animation: none}
}
@media (max-width:900px){.sales-page-note{grid-template-columns:1fr;gap:18px}
.choice-grid{grid-template-columns:1fr}
.choice-card{min-height:auto}
.credentials-list{grid-template-columns:1fr}
}
@media (max-width:560px){.professional-identity{align-items:flex-start}
.professional-identity img{width:54px;height:54px}
.professional-name span{display:block;margin-top:4px}
.sales-page-note{padding:24px}
}
@media (max-width: 1180px){.courses-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
.course-card{min-height: 360px}
}
@media (max-width: 900px){.hero{padding-block: 38px 50px}
.hero-grid{grid-template-columns: 1fr}
.hero-image{width: min(100%, 350px)}
.hero-seal{top: -34px;
right: -58px;
width: 210px;
opacity: 0.5}
.courses-grid{grid-template-columns: 1fr}
.course-card{min-height: auto}
}
@media (max-width: 560px){.hero-content h1{font-size: clamp(1.7rem, 7vw, 2.1rem)}
.hero-image{width: min(100%, 310px)}
.hero-seal{right: -28px;
width: 165px;
opacity: 0.48}
.professional-identity img{width: 46px;
height: 46px}
}
@media (max-width: 900px){.hero-seal{top: -14px;
right: -14px;
width: 112px;
opacity: 0.94}
}
@media (max-width: 560px){.hero-seal{top: -10px;
right: -10px;
width: 94px;
opacity: 0.92}
}
@media (max-width: 900px){.hero-seal{width: 112px;
height: 112px}
}
@media (max-width: 560px){.hero-seal{width: 94px;
height: 94px}
}
@media (max-width: 1050px){.credentials-list-detailed{grid-template-columns: 1fr}
}
@media (max-width: 560px){.credentials-list-detailed{gap: 14px}
.credentials-list-detailed strong{font-size: 0.76rem}
.credentials-list-detailed span{font-size: 0.68rem}
}
@media (max-width: 900px){html{scroll-padding-top: 78px}
.scroll-section{scroll-margin-top: 78px}
.credentials-list-detailed{max-height: none;
overflow: visible;
padding-right: 0}
.contact-actions{width: 100%;
min-width: 0}
.contact-benefits{grid-template-columns: 1fr}
}
@media (max-width: 560px){.courses-title,
.about-title{font-size: clamp(1.9rem, 10vw, 2.65rem)}
.course-card-action a{width: 100%}
}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity: 1;
transform: none;
transition: none}
}
@media (max-width: 1180px){.courses-section{min-height: auto; padding-block: 34px 40px}
.courses-section .courses-title{font-size: clamp(2.35rem, 5vw, 3.7rem)}
}
@media (max-width: 900px){.courses-section{scroll-margin-top: 72px}
.courses-section .section-heading{margin-bottom: 28px}
}
@media (max-width: 1180px){.about-section{min-height: auto;
align-items: flex-start;
padding-block: 42px 54px}
.about-section .about-grid{grid-template-columns: 0.82fr 1.18fr}
.about-section .about-image{max-height: none}
.about-section .about-image img{height: 620px}
}
@media (max-width: 900px){.about-section{scroll-margin-top: 72px}
.about-section .about-grid{grid-template-columns: 1fr}
.about-section .about-image{max-width: 540px}
.about-section .about-image img{height: auto;
min-height: 0;
aspect-ratio: 4 / 5}
.about-section .credentials-list-detailed{grid-template-columns: 1fr}
}
@media (max-width: 1180px){.courses-section .courses-title{font-size: clamp(2.15rem, 4.6vw, 3.35rem)}
.courses-section{padding-block: 28px 36px}
}
@media (max-width: 900px){.courses-section .courses-title br{display: none}
}
@media (max-width: 900px){.contact-to-footer{min-height: auto;
align-items: flex-start;
padding-block: 42px 0}
.footer-simple{padding-block: 42px 28px}
}
@media (max-width: 1050px){.contact-wrapper{grid-template-columns: 1fr}
.contact-community-card{grid-template-columns: 1fr}
.contact-community-card .contact-primary-button{width: 100%;
min-width: 0}
}
@media (max-width: 560px){.contact-community-card,
.contact-support-card{padding: 26px 22px}
.whatsapp-contact{grid-template-columns: auto 1fr}
.whatsapp-contact-arrow{display: none}
.whatsapp-contact strong{font-size: 0.9rem}
}
@media (max-width: 1180px){.contact-wrapper{grid-template-columns: 1fr}
.contact-community-card{grid-template-columns: 1fr auto}
.contact-support-card{max-width: none}
}
@media (max-width: 760px){.contact-to-footer{padding-block: 22px 18px}
.contact-community-card{grid-template-columns: 1fr;
padding: 28px 24px}
.contact-community-card .contact-primary-button{width: 100%}
.contact-support-card{padding: 26px 24px}
}
@media (max-width: 560px){.contact-community-card h2{font-size: clamp(2.2rem, 12vw, 3.2rem)}
.contact-community-card .contact-benefits{grid-template-columns: 1fr}
}
@media (max-width: 1050px){.contact-screen-stable{min-height: auto;
padding-block: 38px 30px}
.contact-screen-stable .contact-community-card,
.contact-screen-stable .contact-support-card{min-height: auto}
}
@media (max-width: 760px){.contact-screen-stable{padding-block: 28px 22px}
.contact-screen-stable .contact-community-card{padding: 28px 22px}
.contact-screen-stable .contact-support-card{padding: 26px 22px}
}
@media (prefers-reduced-motion: reduce){body.reveal-enabled [data-reveal],
body.reveal-enabled [data-reveal].is-visible{opacity: 1;
transform: none;
transition: none}
}
@media (prefers-reduced-motion: reduce){body.section-reveal-enabled [data-section-reveal],
body.section-reveal-enabled [data-section-reveal].section-is-visible{opacity: 1;
transform: none;
transition: none}
}
@media (prefers-reduced-motion: reduce){html.scroll-reveal-ready [data-reveal],
html.scroll-reveal-ready [data-section-reveal],
html.scroll-reveal-ready [data-reveal].is-visible,
html.scroll-reveal-ready [data-section-reveal].is-visible{opacity: 1;
visibility: visible;
transform: none;
transition: none}
}
@media (prefers-reduced-motion: reduce){html.scroll-reveal-ready [data-section-reveal],
html.scroll-reveal-ready [data-section-reveal].is-visible{opacity: 1;
visibility: visible;
transform: none;
transition: none}
}
@media (hover: none){.courses-section .course-card:hover,
.courses-section .course-card:focus-within{transform: none}
.courses-section .course-card-action a{box-shadow: none}
}
@media (prefers-reduced-motion: reduce){.courses-section .course-card,
.courses-section .course-card::after,
.courses-section .course-card .badge,
.courses-section .course-card h3,
.courses-section .course-card-action a,
.courses-section .course-card-action a::before{transition: none}
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{transform: none}
}
@supports not selector(:has(*)){.courses-grid:hover .course-card{opacity: 0.72;
transform: scale(0.98)}
.courses-grid:hover .course-card:hover{opacity: 1;
transform: translateY(-14px) scale(1.055)}
}
@media (hover: none){.courses-grid:has(.course-card:hover) .course-card:not(:hover),
.courses-grid:has(.course-card:focus-within) .course-card:not(:focus-within),
.courses-grid:hover .course-card{opacity: 1;
transform: none;
filter: none}
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{transform: none;
box-shadow: var(--shadow-soft)}
}
@media (prefers-reduced-motion: reduce){.courses-grid:has(.course-card:hover) .course-card:not(:hover),
.courses-grid:has(.course-card:focus-within) .course-card:not(:focus-within),
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{transform: none;
filter: none}
}
@supports not selector(:has(*)){.courses-grid:hover .course-card{opacity: 0.82;
transform: scale(0.982);
filter: saturate(0.88) brightness(0.995)}
.courses-grid:hover .course-card:hover{opacity: 1;
transform: translateY(-12px) scale(1.05);
filter: none}
}
@media (hover: none){.courses-grid:has(.course-card:hover) .course-card:not(:hover),
.courses-grid:has(.course-card:focus-within) .course-card:not(:focus-within),
.courses-grid:hover .course-card{opacity: 1;
transform: none;
filter: none}
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{transform: none}
}
@media (prefers-reduced-motion: reduce){.courses-grid:has(.course-card:hover) .course-card:not(:hover),
.courses-grid:has(.course-card:focus-within) .course-card:not(:focus-within),
.courses-section .course-card:hover,
.courses-section .course-card:focus-within{transform: none;
filter: none}
}
@media (max-width: 900px){.hero-seal{padding: 7px}
}
@media (max-width: 560px){.hero-seal{padding: 6px;
background: rgba(255, 255, 255, 0.82)}
.hero-portrait,
.about-image img{border-width: 1px}
}
@supports not selector(:has(*)){.choice-grid:hover .choice-card{opacity: 0.82;
transform: scale(0.99)}
.choice-grid:hover .choice-card:hover{opacity: 1;
transform: translateY(-8px) scale(1.025)}
}
@media (hover: none){.choice-grid:has(.choice-card:hover) .choice-card:not(:hover),
.choice-grid:has(.choice-card:focus-within) .choice-card:not(:focus-within),
.choice-grid:hover .choice-card{opacity: 1;
transform: none;
filter: none}
.choice-card:hover,
.choice-card:focus-within{transform: none;
box-shadow: var(--shadow-soft)}
.choice-card-button{width: 100%}
}
@media (max-width: 560px){.choice-card-button{width: 100%;
padding-inline: 14px;
text-align: center}
}
@media (prefers-reduced-motion: reduce){.choice-card,
.choice-card::after,
.choice-card-button,
.choice-card-button span{transition: none}
.choice-card:hover,
.choice-card:focus-within,
.choice-grid:has(.choice-card:hover) .choice-card:not(:hover),
.choice-grid:has(.choice-card:focus-within) .choice-card:not(:focus-within){transform: none;
filter: none}
}
.choice-card-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
width:fit-content;
min-width:0;
max-width:240px;
min-height:38px;
margin-top:22px;
padding:12px 18px;
border-radius:999px;
font-size:.72rem;
font-weight:700;
letter-spacing:.05em;
line-height:1.25;
text-transform:uppercase
}
.choice-card-button span{font-size:.85rem}
.choice-card:hover .choice-card-button,.choice-card:focus-within .choice-card-button{
transform:translateY(-2px) scale(1.015)
}
@media(max-width:560px){
.choice-card-button{
width:auto;
max-width:100%;
padding:11px 16px;
font-size:.69rem
}
}

.choice-card-button{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:14px;
width:auto;
min-width:250px;
max-width:320px;
min-height:0;
margin-top:22px;
padding:9px 16px;
border-radius:10px;
font-size:.68rem;
font-weight:700;
letter-spacing:.045em;
line-height:1.1;
white-space:nowrap;
text-transform:uppercase
}
.choice-card-button span{
font-size:.82rem;
flex:0 0 auto
}
.choice-card:hover .choice-card-button,
.choice-card:focus-within .choice-card-button{
transform:translateY(-2px) scale(1.01)
}
@media(max-width:900px){
.choice-card-button{
min-width:220px;
max-width:100%;
padding:9px 14px;
font-size:.66rem
}
}
@media(max-width:560px){
.choice-card-button{
width:100%;
min-width:0;
white-space:normal
}
}


/* Ajuste final dos cards "Qual escolher" */
.choice-card{
display:flex;
flex-direction:column;
}

.choice-card-content{
display:flex;
flex-direction:column;
flex:1;
}

.choice-card h3{
margin-bottom:14px;
}

.choice-card p{
margin-bottom:18px;
line-height:1.55;
}

.choice-card-button{
margin-top:auto!important;
padding:8px 20px!important;
min-height:40px!important;
height:40px!important;
min-width:290px!important;
max-width:310px!important;
border-radius:12px!important;
font-size:.72rem!important;
display:inline-flex;
align-items:center;
justify-content:space-between;
}

.choice-card-button span{
font-size:.9rem!important;
}

@media(max-width:768px){
 .choice-card-button{
   width:100%;
   min-width:0!important;
   max-width:none!important;
 }
}

/* Cards de cursos totalmente clicáveis */
.course-card-clickable{
cursor:pointer;
}

.course-card-clickable a{
position:relative;
z-index:2;
}

.course-card-clickable:focus-visible{
outline:3px solid rgba(184,153,104,.45);
outline-offset:4px;
}

.course-card-clickable::before{
content:"";
position:absolute;
inset:0;
z-index:1;
border-radius:inherit;
pointer-events:none;
}

.course-card-clickable:hover,
.course-card-clickable:focus-within{
cursor:pointer;
}


/* V14 — acabamento final */
.site-logo img,
.header-brand img,
.brand-logo img {
  transition: transform 260ms ease, filter 260ms ease;
  transform-origin: center;
}

.site-logo:hover img,
.header-brand:hover img,
.brand-logo:hover img {
  transform: rotate(2deg) scale(1.035);
  filter: drop-shadow(0 6px 14px rgba(184,153,104,.18));
}

a span[aria-hidden="true"],
.button span[aria-hidden="true"],
.choice-card-button span,
.course-card-action a::after {
  transition: transform 220ms ease;
}

a:hover span[aria-hidden="true"],
a:focus-visible span[aria-hidden="true"],
.button:hover span[aria-hidden="true"],
.choice-card-button:hover span,
.course-card:hover .course-card-action a::after {
  transform: translateX(4px);
}

.badge,
.eyebrow,
.choice-card > span:first-child {
  animation: subtleFadeUp .7s ease both;
}

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

.site-navigation a {
  position: relative;
  transition: color 220ms ease;
}

.site-navigation a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:2px;
  border-radius:999px;
  background:var(--color-gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 220ms ease;
}

.site-navigation a.is-active,
.site-navigation a[aria-current="page"] {
  color:var(--color-gold-dark);
}

.site-navigation a.is-active::after,
.site-navigation a[aria-current="page"]::after {
  transform:scaleX(1);
}

a:focus-visible,
button:focus-visible,
[role="link"]:focus-visible {
  outline:3px solid rgba(184,153,104,.5);
  outline-offset:4px;
  border-radius:8px;
}

@media (prefers-reduced-motion: reduce) {
  .site-logo img,
  .header-brand img,
  .brand-logo img,
  a span[aria-hidden="true"],
  .button span[aria-hidden="true"],
  .choice-card-button span,
  .badge,
  .eyebrow,
  .choice-card > span:first-child {
    animation:none;
    transition:none;
    transform:none;
  }
}


/* Seção Sobre — fotografia em palestra e acabamento premium */
.about-section .about-image-speaker{
  position:relative;
  overflow:hidden;
  padding:10px;
  border:1px solid rgba(184,153,104,.92);
  border-radius:32px;
  background:
    linear-gradient(145deg,rgba(184,153,104,.15),rgba(255,255,255,.025));
  box-shadow:
    0 24px 55px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.about-section .about-image-speaker::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  pointer-events:none;
}

.about-section .about-image-speaker picture{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:23px;
}

.about-section .about-image-speaker img{
  display:block;
  width:100%;
  height:min(690px,calc(100vh - 155px));
  min-height:0;
  object-fit:cover;
  object-position:center 40%;
  border:0;
  border-radius:23px;
  box-shadow:none;
  transition:
    transform 650ms cubic-bezier(.22,1,.36,1),
    filter 420ms ease;
}

.about-section .about-image-speaker:hover img{
  transform:scale(1.018);
  filter:brightness(1.035) contrast(1.02);
}

.about-section .about-image-speaker::after{
  content:"";
  position:absolute;
  inset:10px;
  z-index:1;
  border-radius:23px;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      transparent 55%,
      rgba(0,0,0,.16) 100%
    );
  pointer-events:none;
}

@media(max-width:900px){
  .about-section .about-image-speaker{
    width:min(100%,620px);
    margin-inline:auto;
    padding:8px;
    border-radius:26px;
  }

  .about-section .about-image-speaker picture,
  .about-section .about-image-speaker img,
  .about-section .about-image-speaker::after{
    border-radius:19px;
  }

  .about-section .about-image-speaker img{
    height:auto;
    max-height:none;
    object-position:center;
  }
}

@media(max-width:560px){
  .about-section .about-image-speaker{
    padding:6px;
    border-radius:22px;
    box-shadow:0 16px 34px rgba(0,0,0,.25);
  }

  .about-section .about-image-speaker picture,
  .about-section .about-image-speaker img,
  .about-section .about-image-speaker::after{
    border-radius:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .about-section .about-image-speaker img{
    transition:none;
  }

  .about-section .about-image-speaker:hover img{
    transform:none;
  }
}


/* Formações — cards maiores e interação dinâmica */
#formacoes{
  padding-bottom:clamp(42px,6vh,76px);
}

#formacoes .courses-grid,
#formacoes .formations-grid,
#formacoes .course-grid,
#formacoes .formations-cards-dynamic{
  align-items:stretch;
  gap:clamp(16px,1.6vw,24px);
  overflow:visible;
}

#formacoes .course-card{
  min-height:clamp(410px,54vh,500px);
  padding:clamp(22px,2vw,30px);
  transform-origin:center;
  will-change:transform,opacity,filter,box-shadow;
  transition:
    transform .38s cubic-bezier(.22,1,.36,1),
    opacity .32s ease,
    filter .32s ease,
    box-shadow .38s ease,
    border-color .32s ease;
}

#formacoes .course-card:hover,
#formacoes .course-card:focus-within{
  transform:translateY(-10px) scale(1.055);
  z-index:6;
  box-shadow:
    0 28px 60px rgba(39,31,22,.18),
    0 0 0 1px rgba(184,153,104,.30);
}

#formacoes .formations-cards-dynamic:hover .course-card:not(:hover),
#formacoes .formations-cards-dynamic:focus-within .course-card:not(:focus-within){
  transform:scale(.94);
  opacity:.56;
  filter:saturate(.72) brightness(1.04);
}

#formacoes .course-card:hover .course-card-action a,
#formacoes .course-card:focus-within .course-card-action a{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(184,153,104,.22);
}

#formacoes .course-card h3{
  margin-top:clamp(22px,2.5vh,30px);
}

#formacoes .course-card-action{
  margin-top:auto;
  padding-top:clamp(18px,2vh,26px);
}

@media(max-width:1100px){
  #formacoes .course-card{
    min-height:430px;
  }

  #formacoes .course-card:hover,
  #formacoes .course-card:focus-within{
    transform:translateY(-8px) scale(1.035);
  }

  #formacoes .formations-cards-dynamic:hover .course-card:not(:hover),
  #formacoes .formations-cards-dynamic:focus-within .course-card:not(:focus-within){
    transform:scale(.97);
    opacity:.68;
  }
}

@media(max-width:820px){
  #formacoes{
    padding-bottom:40px;
  }

  #formacoes .course-card{
    min-height:auto;
  }

  #formacoes .course-card:hover,
  #formacoes .course-card:focus-within,
  #formacoes .formations-cards-dynamic:hover .course-card:not(:hover),
  #formacoes .formations-cards-dynamic:focus-within .course-card:not(:focus-within){
    transform:none;
    opacity:1;
    filter:none;
  }
}

@media(prefers-reduced-motion:reduce){
  #formacoes .course-card,
  #formacoes .course-card:hover,
  #formacoes .course-card:focus-within,
  #formacoes .formations-cards-dynamic:hover .course-card:not(:hover),
  #formacoes .formations-cards-dynamic:focus-within .course-card:not(:focus-within){
    transition:none;
    transform:none;
    opacity:1;
    filter:none;
  }
}


/* Menu mobile flutuante e sólido */
@media(max-width:820px){
  .site-header{
    position:sticky;
    top:0;
    z-index:9000;
  }

  .menu-toggle,
  .mobile-menu-toggle,
  .navigation-toggle{
    position:fixed!important;
    top:16px!important;
    right:16px!important;
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:50%!important;
    background:#2f2b28!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(0,0,0,.24)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:9999!important;
    cursor:pointer;
    transition:
      transform .24s ease,
      box-shadow .24s ease,
      background-color .24s ease;
  }

  .menu-toggle:hover,
  .menu-toggle:focus-visible,
  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible,
  .navigation-toggle:hover,
  .navigation-toggle:focus-visible{
    transform:translateY(-1px) scale(1.04);
    background:#201d1b!important;
    box-shadow:0 16px 34px rgba(0,0,0,.3)!important;
  }

  .menu-toggle span,
  .mobile-menu-toggle span,
  .navigation-toggle span{
    display:block;
    width:22px!important;
    height:2px!important;
    margin:2.5px 0!important;
    border-radius:999px;
    background:#fff!important;
    opacity:1!important;
    transition:
      transform .26s ease,
      opacity .2s ease;
  }

  .menu-toggle svg,
  .mobile-menu-toggle svg,
  .navigation-toggle svg{
    width:23px!important;
    height:23px!important;
    stroke:#fff!important;
    fill:none!important;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1),
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1),
  .navigation-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2),
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2),
  .navigation-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3),
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3),
  .navigation-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .site-navigation{
    z-index:9800;
  }

  .site-navigation.is-open,
  .site-navigation[aria-hidden="false"]{
    padding-top:82px;
  }
}

@media(max-width:480px){
  .menu-toggle,
  .mobile-menu-toggle,
  .navigation-toggle{
    top:12px!important;
    right:12px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .menu-toggle,
  .mobile-menu-toggle,
  .navigation-toggle,
  .menu-toggle span,
  .mobile-menu-toggle span,
  .navigation-toggle span{
    transition:none!important;
  }
}


/* Menu mobile lateral suspenso — versão final */
@media(max-width:820px){
  body.menu-open{
    overflow:hidden;
  }

  .site-header{
    position:sticky;
    top:0;
    z-index:9000;
    overflow:visible!important;
  }

  .menu-toggle,
  .mobile-menu-toggle,
  .navigation-toggle{
    position:fixed!important;
    top:14px!important;
    right:14px!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:50%!important;
    background:#2f2b28!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(0,0,0,.28)!important;
    z-index:10020!important;
  }

  .menu-toggle span,
  .mobile-menu-toggle span,
  .navigation-toggle span{
    display:block!important;
    width:21px!important;
    height:2px!important;
    margin:0!important;
    border-radius:999px!important;
    background:#fff!important;
    opacity:1!important;
    transition:transform .25s ease,opacity .2s ease!important;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1),
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1),
  .navigation-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6px) rotate(45deg)!important;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2),
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2),
  .navigation-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0!important;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3),
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3),
  .navigation-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg)!important;
  }

  .site-navigation{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    bottom:0!important;
    width:min(82vw,340px)!important;
    height:100dvh!important;
    min-height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    padding:88px 24px 30px!important;
    margin:0!important;
    background:#f5efe5!important;
    color:#2f2b28!important;
    border-left:1px solid rgba(184,153,104,.38)!important;
    box-shadow:-18px 0 42px rgba(33,27,22,.22)!important;
    opacity:1!important;
    transform:translateX(105%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow-y:auto!important;
    z-index:10000!important;
    transition:
      transform .34s cubic-bezier(.22,1,.36,1),
      visibility .34s ease!important;
  }

  .site-navigation.is-open,
  .site-navigation[aria-hidden="false"]{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .site-navigation a{
    display:flex!important;
    align-items:center!important;
    min-height:58px!important;
    padding:14px 4px!important;
    margin:0!important;
    border-bottom:1px solid rgba(47,43,40,.13)!important;
    color:#2f2b28!important;
    font-weight:700!important;
    font-size:1rem!important;
    text-decoration:none!important;
    background:transparent!important;
  }

  .site-navigation a::after{
    bottom:8px!important;
  }

  .site-navigation a:hover,
  .site-navigation a:focus-visible,
  .site-navigation a.is-active,
  .site-navigation a[aria-current="page"]{
    color:#9b7747!important;
  }

  .mobile-menu-backdrop{
    position:fixed;
    inset:0;
    display:block;
    background:rgba(22,18,15,.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:9990;
    transition:opacity .28s ease,visibility .28s ease;
  }

  body.menu-open .mobile-menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

@media(max-width:480px){
  .site-navigation{
    width:min(86vw,320px)!important;
    padding-inline:20px!important;
  }

  .menu-toggle,
  .mobile-menu-toggle,
  .navigation-toggle{
    top:12px!important;
    right:12px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }
}


/* Menu mobile compacto — painel suspenso no canto superior direito */
@media(max-width:820px){
  .site-navigation{
    top:68px!important;
    right:10px!important;
    bottom:auto!important;
    width:min(48vw,210px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 86px)!important;
    padding:14px 16px 16px!important;
    border:1px solid rgba(184,153,104,.42)!important;
    border-radius:18px!important;
    background:#f5efe5!important;
    box-shadow:
      0 18px 42px rgba(33,27,22,.28),
      0 0 0 1px rgba(255,255,255,.32) inset!important;
    overflow-y:auto!important;
  }

  .site-navigation a{
    min-height:48px!important;
    padding:11px 2px!important;
    font-size:.95rem!important;
  }

  .site-navigation a:last-child{
    border-bottom:0!important;
  }

  .site-navigation.is-open,
  .site-navigation[aria-hidden="false"]{
    transform:translateX(0)!important;
  }

  .menu-toggle,
  .mobile-menu-toggle,
  .navigation-toggle{
    top:14px!important;
    right:14px!important;
  }
}

@media(max-width:480px){
  .site-navigation{
    top:64px!important;
    right:8px!important;
    width:min(52vw,196px)!important;
    max-height:calc(100dvh - 78px)!important;
    padding:12px 14px 14px!important;
    border-radius:16px!important;
  }

  .site-navigation a{
    min-height:46px!important;
    padding:10px 2px!important;
    font-size:.92rem!important;
  }
}


/* Menu mobile integrado ao cabeçalho */
@media(max-width:820px){
  .site-header{
    background:#f7f1e8!important;
    border-bottom:1px solid rgba(47,43,40,.12)!important;
    box-shadow:none!important;
  }

  .menu-toggle,
  .mobile-menu-toggle,
  .navigation-toggle{
    background:transparent!important;
    color:#2f2b28!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }

  .menu-toggle:hover,
  .menu-toggle:focus-visible,
  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible,
  .navigation-toggle:hover,
  .navigation-toggle:focus-visible{
    transform:none!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .menu-toggle span,
  .mobile-menu-toggle span,
  .navigation-toggle span{
    background:#2f2b28!important;
  }

  .site-navigation{
    top:67px!important;
    right:0!important;
    width:210px!important;
    max-height:calc(100dvh - 67px)!important;
    padding:8px 18px 12px!important;
    margin:0!important;
    border:0!important;
    border-left:1px solid rgba(47,43,40,.08)!important;
    border-bottom:1px solid rgba(47,43,40,.12)!important;
    border-radius:0 0 0 16px!important;
    background:#f7f1e8!important;
    box-shadow:0 12px 24px rgba(33,27,22,.08)!important;
  }

  .site-navigation a{
    min-height:48px!important;
    padding:12px 0!important;
    border-bottom:1px solid rgba(47,43,40,.11)!important;
    color:#2f2b28!important;
    font-size:.94rem!important;
    font-weight:700!important;
  }

  .site-navigation a:last-child{
    border-bottom:0!important;
  }

  .site-navigation a:hover,
  .site-navigation a:focus-visible,
  .site-navigation a.is-active,
  .site-navigation a[aria-current="page"]{
    color:#9b7747!important;
    background:transparent!important;
  }

  .site-navigation a::after{
    bottom:6px!important;
    height:1px!important;
  }

  .mobile-menu-backdrop{
    background:rgba(32,27,23,.12)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

@media(max-width:480px){
  .site-navigation{
    top:63px!important;
    width:194px!important;
    max-height:calc(100dvh - 63px)!important;
    padding:6px 16px 10px!important;
    border-radius:0 0 0 14px!important;
  }

  .site-navigation a{
    min-height:46px!important;
    font-size:.92rem!important;
  }
}


/* Ajuste fino — menu abaixo da linha do cabeçalho */
@media(max-width:820px){
  .site-navigation{
    top:71px!important;
    right:0!important;
    width:180px!important;
    max-height:calc(100dvh - 71px)!important;
    padding:6px 14px 10px!important;
    border-top:0!important;
    border-left:1px solid rgba(47,43,40,.08)!important;
    border-bottom:1px solid rgba(47,43,40,.12)!important;
    border-radius:0 0 0 14px!important;
    background:#f7f1e8!important;
    box-shadow:0 8px 18px rgba(33,27,22,.06)!important;
  }

  .site-navigation a{
    min-height:42px!important;
    padding:10px 0!important;
    font-size:.92rem!important;
  }
}

@media(max-width:480px){
  .site-navigation{
    top:69px!important;
    width:176px!important;
    max-height:calc(100dvh - 69px)!important;
    padding:5px 13px 9px!important;
  }

  .site-navigation a{
    min-height:40px!important;
    padding:9px 0!important;
    font-size:.9rem!important;
  }
}


/* Mobile — Hero compacto e proporcional */
@media(max-width:820px){
  #topo,
  .hero-section{
    min-height:auto!important;
    padding-top:24px!important;
    padding-bottom:40px!important;
  }

  #topo .hero-container,
  .hero-section .hero-container,
  #topo .container{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:26px!important;
    align-items:start!important;
  }

  #topo .hero-content,
  .hero-section .hero-content{
    order:1!important;
  }

  #topo .hero-visual,
  #topo .hero-image,
  .hero-section .hero-visual,
  .hero-section .hero-image{
    order:2!important;
    margin-top:4px!important;
  }

  #topo h1,
  .hero-section h1{
    max-width:12ch!important;
    margin:0 0 16px!important;
    font-size:clamp(2.65rem,10vw,4rem)!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
  }

  #topo .hero-description,
  #topo .hero-subtitle,
  .hero-section .hero-description,
  .hero-section .hero-subtitle{
    max-width:34rem!important;
    margin-bottom:22px!important;
    font-size:clamp(1rem,3.6vw,1.08rem)!important;
    line-height:1.55!important;
  }

  #topo .hero-actions,
  .hero-section .hero-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:12px!important;
    margin-top:0!important;
  }

  #topo .hero-actions a,
  .hero-section .hero-actions a{
    min-height:48px!important;
    padding:13px 20px!important;
    font-size:.83rem!important;
    white-space:nowrap!important;
  }

  #topo .hero-image-wrapper,
  #topo .hero-portrait,
  .hero-section .hero-image-wrapper,
  .hero-section .hero-portrait{
    width:min(76vw,360px)!important;
    margin-inline:auto!important;
  }

  #topo .hero-image-wrapper img,
  #topo .hero-portrait img,
  .hero-section .hero-image-wrapper img,
  .hero-section .hero-portrait img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:cover!important;
  }

  #topo .hero-logo-overlay,
  .hero-section .hero-logo-overlay{
    width:clamp(86px,19vw,112px)!important;
    height:clamp(86px,19vw,112px)!important;
    top:-12px!important;
    right:-10px!important;
  }
}

@media(max-width:560px){
  #topo,
  .hero-section{
    padding-top:20px!important;
    padding-bottom:34px!important;
  }

  #topo .hero-container,
  .hero-section .hero-container,
  #topo .container{
    gap:22px!important;
  }

  #topo h1,
  .hero-section h1{
    max-width:11ch!important;
    font-size:clamp(2.35rem,11vw,3.25rem)!important;
    line-height:1!important;
    margin-bottom:14px!important;
  }

  #topo .hero-description,
  #topo .hero-subtitle,
  .hero-section .hero-description,
  .hero-section .hero-subtitle{
    margin-bottom:20px!important;
    font-size:.98rem!important;
    line-height:1.5!important;
  }

  #topo .hero-actions,
  .hero-section .hero-actions{
    gap:10px!important;
  }

  #topo .hero-actions a,
  .hero-section .hero-actions a{
    min-height:46px!important;
    padding:12px 18px!important;
    font-size:.78rem!important;
  }

  #topo .hero-image-wrapper,
  #topo .hero-portrait,
  .hero-section .hero-image-wrapper,
  .hero-section .hero-portrait{
    width:min(72vw,300px)!important;
  }
}


/* Correção definitiva do Hero e menu mobile */
@media (max-width: 820px){
  .header-content{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:68px!important;
  }

  .brand{
    min-width:0!important;
    flex:1 1 auto!important;
  }

  .menu-button{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    margin:0 0 0 auto!important;
    padding:10px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    z-index:10020!important;
  }

  .menu-button span{
    display:block!important;
    width:100%!important;
    height:1px!important;
    margin-block:6px!important;
    background:#2f2b28!important;
  }

  .site-navigation{
    position:fixed!important;
    top:70px!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
    width:180px!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 70px)!important;
    padding:6px 14px 10px!important;
    background:#f7f1e8!important;
    border:0!important;
    border-left:1px solid rgba(47,43,40,.08)!important;
    border-bottom:1px solid rgba(47,43,40,.12)!important;
    border-radius:0 0 0 14px!important;
    box-shadow:0 8px 18px rgba(33,27,22,.06)!important;
    transform:translateX(105%)!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:10000!important;
  }

  .site-navigation.is-open,
  .site-navigation[aria-hidden="false"]{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .site-navigation a{
    min-height:42px!important;
    padding:10px 0!important;
    font-size:.92rem!important;
  }

  .hero{
    min-height:auto!important;
    padding:18px 0 30px!important;
    align-items:flex-start!important;
  }

  .hero-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
    align-items:start!important;
  }

  .hero-content{
    order:1!important;
  }

  .professional-identity{
    gap:10px!important;
    margin-bottom:14px!important;
    align-items:center!important;
  }

  .professional-identity img{
    width:46px!important;
    height:46px!important;
  }

  .professional-name{
    font-size:.66rem!important;
    line-height:1.35!important;
  }

  .professional-name span{
    display:inline!important;
    margin-top:0!important;
  }

  .professional-role{
    font-size:.64rem!important;
    line-height:1.35!important;
  }

  .hero-content h1{
    max-width:100%!important;
    margin:0 0 12px!important;
    font-size:clamp(2rem,7.8vw,2.75rem)!important;
    line-height:1.01!important;
    letter-spacing:-.025em!important;
  }

  .hero-content h1 span{
    margin-top:4px!important;
  }

  .hero-description{
    max-width:100%!important;
    margin:0!important;
    font-size:.9rem!important;
    line-height:1.48!important;
  }

  .hero-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:10px!important;
    margin-top:18px!important;
  }

  .hero-actions .button{
    width:auto!important;
    min-height:44px!important;
    padding:11px 15px!important;
    font-size:.72rem!important;
    white-space:nowrap!important;
  }

  .hero-image{
    order:2!important;
    width:min(58vw,270px)!important;
    max-width:none!important;
    margin:2px auto 0!important;
    justify-self:center!important;
  }

  .hero-portrait{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/5!important;
    object-fit:cover!important;
    object-position:center 18%!important;
  }

  .hero-seal{
    top:-10px!important;
    right:-10px!important;
    width:88px!important;
    height:88px!important;
    opacity:.94!important;
  }
}

@media (max-width: 560px){
  .header-content{
    min-height:66px!important;
  }

  .site-navigation{
    top:68px!important;
    width:176px!important;
    max-height:calc(100dvh - 68px)!important;
  }

  .hero{
    padding:16px 0 26px!important;
  }

  .professional-identity{
    margin-bottom:12px!important;
  }

  .hero-content h1{
    font-size:clamp(1.9rem,8.8vw,2.35rem)!important;
    line-height:1.02!important;
    margin-bottom:10px!important;
  }

  .hero-description{
    font-size:.86rem!important;
    line-height:1.45!important;
  }

  .hero-actions{
    gap:8px!important;
    margin-top:16px!important;
  }

  .hero-actions .button{
    min-height:42px!important;
    padding:10px 13px!important;
    font-size:.67rem!important;
  }

  .hero-image{
    width:min(56vw,245px)!important;
  }

  .hero-seal{
    width:78px!important;
    height:78px!important;
  }
}

@media (max-width: 380px){
  .hero-content h1{
    font-size:1.82rem!important;
  }

  .hero-actions .button{
    padding-inline:11px!important;
    font-size:.63rem!important;
  }

  .hero-image{
    width:min(60vw,225px)!important;
  }
}


/* Menu mobile alinhado logo abaixo do botão */
@media (max-width: 820px){
  .site-navigation{
    top:calc(var(--mobile-header-height, 68px) + 4px)!important;
    right:12px!important;
    left:auto!important;
    width:176px!important;
    max-height:calc(100dvh - var(--mobile-header-height, 68px) - 16px)!important;
    border-radius:0 0 0 14px!important;
    transform-origin:top right!important;
  }

  .menu-button{
    margin-left:auto!important;
    align-self:center!important;
  }
}

@media (max-width: 480px){
  .site-navigation{
    right:10px!important;
    width:172px!important;
  }
}


/* Mobile — cabeçalho superior mais compacto */
@media (max-width: 820px){
  .site-header{
    min-height:56px!important;
  }

  .header-content{
    min-height:56px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  .brand{
    gap:9px!important;
  }

  .brand img,
  .brand-logo,
  .site-logo{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
  }

  .brand-title,
  .brand-name{
    font-size:.93rem!important;
    line-height:1.05!important;
  }

  .brand-subtitle,
  .brand-tagline{
    margin-top:2px!important;
    font-size:.62rem!important;
    line-height:1.15!important;
  }

  .menu-button{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
    padding:9px!important;
  }

  .hero{
    padding-top:10px!important;
  }
}

@media (max-width: 560px){
  .site-header{
    min-height:52px!important;
  }

  .header-content{
    min-height:52px!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
  }

  .brand img,
  .brand-logo,
  .site-logo{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }

  .brand-title,
  .brand-name{
    font-size:.88rem!important;
  }

  .brand-subtitle,
  .brand-tagline{
    font-size:.58rem!important;
  }

  .menu-button{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    padding:8px!important;
  }

  .hero{
    padding-top:8px!important;
  }
}

/* =========================================================
   CORREÇÃO FINAL — MOBILE SEM ROLAGEM HORIZONTAL
   Deve permanecer no FINAL do CSS.
   ========================================================= */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

img,
svg,
video,
iframe,
canvas,
picture {
  max-width: 100%;
}

@media (max-width: 820px) {
  :root {
    --container-padding: 14px !important;
  }

  html,
  body,
  main,
  header,
  footer,
  section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body > *,
  main > *,
  section > * {
    max-width: 100% !important;
  }

  .container,
  .header-content,
  .hero > .container,
  .hero-grid,
  .courses-section > .container,
  .about-section > .container,
  .contact-wrapper,
  .contact-to-footer .contact-wrapper,
  .contact-screen-stable .contact-wrapper {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero,
  .courses-section,
  .about-section,
  .contact-section,
  .contact-to-footer,
  .contact-screen-stable,
  .site-header,
  .site-footer {
    overflow-x: clip !important;
  }

  .header-content,
  .hero-grid,
  .hero-content,
  .hero-image,
  .professional-identity,
  .hero-actions,
  .courses-grid,
  .course-card,
  .about-content,
  .contact-wrapper,
  .contact-community-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .brand {
    min-width: 0 !important;
    max-width: calc(100% - 52px) !important;
    overflow: hidden !important;
  }

  .brand-text,
  .brand-copy,
  .professional-identity > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .brand-title,
  .brand-name,
  .brand-subtitle,
  .brand-tagline,
  .professional-name,
  .professional-role {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-content {
    width: 100% !important;
  }

  .hero-content h1 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-description {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .hero-actions .button,
  .hero-actions a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .hero-actions .button:first-child {
    white-space: nowrap !important;
    font-size: clamp(.61rem, 2.7vw, .72rem) !important;
  }

  .hero-actions .button:last-child {
    font-size: clamp(.61rem, 2.7vw, .72rem) !important;
  }

  .hero-image,
  .hero-image-wrapper,
  .hero-portrait {
    max-width: 100% !important;
  }

  .hero-seal {
    right: 0 !important;
  }

  .site-navigation {
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }

  [data-reveal],
  .reveal,
  .is-revealed {
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  :root {
    --container-padding: 12px !important;
  }

  .container,
  .header-content,
  .hero > .container,
  .hero-grid,
  .courses-section > .container,
  .about-section > .container,
  .contact-wrapper,
  .contact-to-footer .contact-wrapper,
  .contact-screen-stable .contact-wrapper {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  .hero-actions {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) !important;
    gap: 8px !important;
  }
}

/* Compatibilidade para navegadores sem suporte completo a overflow: clip */
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

/* =========================================================
   CORREÇÃO DE FINALIZAÇÃO — TOPO MOBILE
   Remove a faixa branca superior e reduz de fato o cabeçalho.
   Aplicar no FINAL do CSS.
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --mobile-header-height: 68px !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body {
    inset: auto !important;
    top: auto !important;
    transform: none !important;
  }

  body::before,
  body::after,
  .site-header::before,
  .site-header::after {
    display: none !important;
    content: none !important;
  }

  .site-header {
    position: sticky !important;
    inset: 0 auto auto 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    transform: none !important;

    background: #f8f5ef !important;
    overflow: visible !important;
  }

  .site-header > .container,
  .site-header .header-content,
  .header-content {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;

    margin: 0 auto !important;
    padding: 0 !important;
    gap: 10px !important;
    transform: none !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: calc(100% - 50px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 9px !important;
    transform: none !important;
  }

  .brand-symbol,
  .brand-logo,
  .site-logo,
  .brand img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
  }

  .brand-text,
  .brand-copy {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .brand-text strong,
  .brand-title,
  .brand-name {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .86rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .brand-text small,
  .brand-subtitle,
  .brand-tagline {
    display: block !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: .56rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .menu-button {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 8px !important;
    transform: translateY(-50%) !important;
    align-self: auto !important;
  }

  .menu-button span {
    width: 20px !important;
    height: 1px !important;
    margin: 3px 0 !important;
  }

  .site-navigation {
    top: var(--mobile-header-height) !important;
    right: 10px !important;
    max-height: calc(100dvh - var(--mobile-header-height)) !important;
  }

  main,
  .hero {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}

@media (max-width: 420px) {
  .site-header > .container,
  .site-header .header-content,
  .header-content {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  .brand-symbol,
  .brand-logo,
  .site-logo,
  .brand img {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    flex-basis: 36px !important;
  }

  .brand-text strong,
  .brand-title,
  .brand-name {
    font-size: .82rem !important;
  }

  .brand-text small,
  .brand-subtitle,
  .brand-tagline {
    font-size: .53rem !important;
  }
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

/* =========================================================
   CORREÇÃO DEFINITIVA — HEADER FIXO E MENU SEMPRE DISPONÍVEL
   Mantém o botão à direita e o menu preso ao header em qualquer
   posição da página. Aplicar no FINAL do CSS.
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --mobile-header-height: 68px !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body {
    padding-top: var(--mobile-header-height) !important;
  }

  .site-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;

    background: #f8f5ef !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 30000 !important;
  }

  .site-header > .container,
  .site-header .header-content,
  .header-content {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;

    margin: 0 auto !important;
    padding: 0 !important;
    gap: 10px !important;
    overflow: visible !important;
    transform: none !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: calc(100% - 52px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 9px !important;
    overflow: hidden !important;
  }

  .brand-symbol,
  .brand-logo,
  .site-logo,
  .brand img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  .brand-text,
  .brand-copy {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .brand-text strong,
  .brand-title,
  .brand-name {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .86rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .brand-text small,
  .brand-subtitle,
  .brand-tagline {
    display: block !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: .56rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .menu-button {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 8px !important;
    transform: translateY(-50%) !important;
    z-index: 32000 !important;
  }

  .menu-button span {
    width: 20px !important;
    height: 1px !important;
    margin: 3px 0 !important;
  }

  /* O menu fica preso ao header fixo, não ao início da página */
  .site-navigation {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    width: 176px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--mobile-header-height) - 12px) !important;

    margin: 0 !important;
    padding: 6px 14px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #f7f1e8 !important;
    border: 1px solid rgba(47, 43, 40, .10) !important;
    border-top: 0 !important;
    border-radius: 0 0 0 14px !important;
    box-shadow: 0 12px 28px rgba(33, 27, 22, .14) !important;

    z-index: 31000 !important;
  }

  /* Preserva a lógica de abertura já usada pelo JavaScript */
  .site-navigation.is-open,
  .site-navigation[aria-hidden="false"] {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  main,
  .hero {
    margin-top: 0 !important;
  }

  /* Evita que links ancorados fiquem escondidos sob o header */
  section,
  [id] {
    scroll-margin-top: calc(var(--mobile-header-height) + 8px) !important;
  }
}

@media (max-width: 420px) {
  .site-header > .container,
  .site-header .header-content,
  .header-content {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  .site-navigation {
    right: 0 !important;
    width: 172px !important;
  }
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

/* =========================================================
   AJUSTE FINO — ALINHAMENTO DO HEADER E INÍCIO DO HERO
   Corrige:
   1. logo e texto excessivamente altos no cabeçalho;
   2. identificação profissional sobreposta pelo header fixo.
   Deve permanecer no FINAL do CSS.
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --mobile-header-height: 68px !important;
  }

  body {
    padding-top: var(--mobile-header-height) !important;
  }

  .site-header {
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;
  }

  .site-header > .container,
  .site-header .header-content,
  .header-content {
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;
    padding: 0 !important;
    align-items: center !important;
  }

  /* Desce levemente a marca para centralizá-la visualmente */
  .brand {
    position: relative !important;
    top: 2px !important;
    transform: none !important;
    align-self: center !important;
  }

  .brand-symbol,
  .brand-logo,
  .site-logo,
  .brand img {
    margin: 0 !important;
    transform: none !important;
  }

  .brand-text,
  .brand-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: center !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .brand-text strong,
  .brand-title,
  .brand-name {
    line-height: 1.02 !important;
  }

  .brand-text small,
  .brand-subtitle,
  .brand-tagline {
    margin-top: 2px !important;
    line-height: 1.02 !important;
  }

  .menu-button {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Neutraliza deslocamentos antigos que puxavam o Hero para trás do header */
  main {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 12px !important;
    transform: none !important;
    overflow: visible !important;
  }

  .hero > .container,
  .hero-grid,
  .hero-content {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  /* Garante que a identificação comece totalmente abaixo do cabeçalho */
  .professional-identity {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .professional-identity img,
  .professional-identity .identity-logo,
  .professional-identity .professional-logo {
    transform: none !important;
  }

  .hero-content h1 {
    margin-top: 0 !important;
  }

  section,
  [id] {
    scroll-margin-top: calc(var(--mobile-header-height) + 10px) !important;
  }
}

@media (max-width: 420px) {
  .brand {
    top: 2px !important;
  }

  .hero {
    padding-top: 10px !important;
  }

  .professional-identity {
    margin-bottom: 10px !important;
  }
}

/* =========================================================
   AJUSTE FINAL — ESPAÇO MÍNIMO ENTRE HEADER E CONTEÚDO
   Mantém o header fixo e elimina compensações duplicadas.
   Este bloco deve permanecer no FINAL do CSS.
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --mobile-header-height: 68px !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;
    z-index: 30000 !important;
  }

  main {
    margin: 0 !important;
    padding: var(--mobile-header-height) 0 0 !important;
    min-height: 0 !important;
    transform: none !important;
  }

  #inicio,
  #topo,
  main > .hero:first-child,
  main > section.hero:first-child,
  .hero:first-of-type {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 2px 0 24px !important;

    align-content: start !important;
    justify-content: start !important;
    transform: none !important;
  }

  #inicio > .container,
  #topo > .container,
  .hero:first-of-type > .container,
  #inicio .hero-grid,
  #topo .hero-grid,
  .hero:first-of-type .hero-grid,
  #inicio .hero-content,
  #topo .hero-content,
  .hero:first-of-type .hero-content {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

    align-items: start !important;
    align-content: start !important;
    align-self: start !important;
    justify-content: start !important;
    transform: none !important;
  }

  .professional-identity {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
  }

  .hero-content h1 {
    margin-top: 0 !important;
  }
}

@media (max-width: 420px) {
  #inicio,
  #topo,
  main > .hero:first-child,
  main > section.hero:first-child,
  .hero:first-of-type {
    padding-top: 0 !important;
  }

  .professional-identity {
    margin-bottom: 6px !important;
  }
}

/* =========================================================
   AJUSTE FINO — ESPAÇAMENTO LEVEMENTE MAIOR
   Colar no FINAL do CSS.
   ========================================================= */

@media (max-width: 820px) {

  main{
    padding-top: calc(var(--mobile-header-height) + 8px) !important;
  }

  #inicio,
  #topo,
  main > .hero:first-child,
  main > section.hero:first-child,
  .hero:first-of-type{
    padding-top: 8px !important;
  }

  .professional-identity{
    margin-bottom: 10px !important;
  }
}

@media (max-width:420px){

  main{
    padding-top: calc(var(--mobile-header-height) + 6px) !important;
  }

  #inicio,
  #topo,
  main > .hero:first-child,
  main > section.hero:first-child,
  .hero:first-of-type{
    padding-top: 6px !important;
  }
}

/* =========================================================
   HERO MOBILE — TÍTULOS REALMENTE COMPACTOS
   Usa a estrutura existente do HTML:
   texto principal + <span> para a segunda frase.
   Manter este bloco no FINAL do CSS.
   ========================================================= */

@media (max-width: 820px) {
  #inicio .hero-content h1,
  .hero:first-of-type .hero-content h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;

    font-size: clamp(1.72rem, 6.4vw, 2rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  /* Remove as quebras rígidas existentes no HTML */
  #inicio .hero-content h1 br,
  .hero:first-of-type .hero-content h1 br {
    display: none !important;
  }

  /* A segunda frase continua em um bloco separado */
  #inicio .hero-content h1 > span,
  .hero:first-of-type .hero-content h1 > span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;

    color: var(--color-gold-dark) !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-wrap: balance !important;
  }

  #inicio .hero-description,
  .hero:first-of-type .hero-description {
    margin: 0 0 10px !important;
    font-size: .80rem !important;
    line-height: 1.36 !important;
  }

  #inicio .hero-actions,
  .hero:first-of-type .hero-actions {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  #inicio .hero-image,
  .hero:first-of-type .hero-image {
    margin-top: 0 !important;
  }
}

@media (max-width: 420px) {
  #inicio .hero-content h1,
  .hero:first-of-type .hero-content h1 {
    font-size: clamp(1.62rem, 7.1vw, 1.85rem) !important;
    line-height: 1.01 !important;
  }

  #inicio .hero-description,
  .hero:first-of-type .hero-description {
    font-size: .77rem !important;
    line-height: 1.33 !important;
  }
}

/* =========================================================
   DESKTOP — CARDS DE CURSOS MAIS COMPACTOS
   Não altera cores nem a versão mobile.
   Manter este bloco no FINAL do CSS.
   ========================================================= */

@media (min-width: 1025px) {

  .courses-grid {
    align-items: start !important;
    gap: 22px !important;
  }

  .course-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 24px 24px 22px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .course-card .course-eyebrow,
  .course-card .course-tag,
  .course-card .badge {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  .course-card .course-kicker,
  .course-card .course-subtitle {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .course-card h3,
  .course-card .course-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.04 !important;
  }

  .course-card p,
  .course-card .course-description {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.38 !important;
  }

  .course-card ul,
  .course-card .course-list {
    margin-top: 2px !important;
    margin-bottom: 10px !important;
    padding-left: 18px !important;
  }

  .course-card li {
    margin-bottom: 4px !important;
  }

  /* Remove qualquer espaço automático antes do botão */
  .course-card .course-footer,
  .course-card .course-actions,
  .course-card .card-footer {
    margin-top: 10px !important;
    padding-top: 0 !important;
  }

  .course-card .button,
  .course-card .course-button,
  .course-card a[class*="button"] {
    margin-top: 0 !important;
  }

  .course-card small,
  .course-card .course-note {
    margin-top: 6px !important;
    line-height: 1.3 !important;
  }
}

/* =========================================================
   DESKTOP — TRANSIÇÃO MAIS CURTA ENTRE CURSOS E SOBRE
   Faz o início da seção "Sobre" aparecer logo após os cards,
   sem alterar a versão mobile.
   Manter este bloco no FINAL do CSS.
   ========================================================= */

@media (min-width: 1025px) {

  /* Remove o grande espaço vazio após os cards */
  .courses-section {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
  }

  .courses-section > .container,
  .courses-section .container {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .courses-grid {
    margin-bottom: 0 !important;
  }

  /* Aproxima a seção Sobre e deixa parte dela visível */
  .about-section {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 42px !important;
  }

  .about-section > .container,
  .about-section .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Neutraliza espaçadores ou pseudo-elementos entre as seções */
  .courses-section::after,
  .about-section::before {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   CARDS DE FORMAÇÃO — CORES RESPONSIVAS
   Mantém o DERM.US escuro e aplica o novo destaque somente em
   GLUTE.US, LIPE.US e Laudo com IA em todos os dispositivos.
   Manter este bloco no FINAL do CSS.
   ========================================================= */

/* DERM.US: preserva integralmente o visual escuro */
#formacoes .course-card.course-card-featured {
  background: var(--color-dark) !important;
  color: var(--color-text-light) !important;
  border-color: var(--color-dark) !important;
}

#formacoes .course-card.course-card-featured h3,
#formacoes .course-card.course-card-featured p,
#formacoes .course-card.course-card-featured li,
#formacoes .course-card.course-card-featured .course-format,
#formacoes .course-card.course-card-featured .course-card-action small {
  color: inherit !important;
}

#formacoes .course-card.course-card-featured p,
#formacoes .course-card.course-card-featured li,
#formacoes .course-card.course-card-featured .course-format,
#formacoes .course-card.course-card-featured .course-card-action small {
  color: var(--color-text-light-muted) !important;
}

#formacoes .course-card.course-card-featured h3 {
  color: var(--color-text-light) !important;
}

/* GLUTE.US, LIPE.US e Laudo com IA */
#formacoes .course-card:not(.course-card-featured) {
  background: #f8f2e8 !important;
  border-color: rgba(181, 147, 94, 0.30) !important;
  box-shadow:
    0 8px 22px rgba(45, 35, 22, 0.06),
    0 2px 6px rgba(45, 35, 22, 0.04) !important;
}

#formacoes .course-card:not(.course-card-featured) h3 {
  color: #3a322d !important;
}

#formacoes .course-card:not(.course-card-featured) p,
#formacoes .course-card:not(.course-card-featured) li,
#formacoes .course-card:not(.course-card-featured) .course-format,
#formacoes .course-card:not(.course-card-featured) .course-card-action small {
  color: #5f5752 !important;
}

#formacoes .course-card:not(.course-card-featured) .badge {
  background: #fff9f0 !important;
  border-color: #b5935e !important;
  color: #9a7842 !important;
}

/* Hover consistente em desktop e dispositivos com ponteiro */
@media (hover: hover) and (pointer: fine) {
  #formacoes .course-card:not(.course-card-featured):hover,
  #formacoes .course-card:not(.course-card-featured):focus-within {
    background: #faf5ed !important;
    border-color: rgba(181, 147, 94, 0.48) !important;
    box-shadow:
      0 14px 30px rgba(45, 35, 22, 0.10),
      0 4px 10px rgba(45, 35, 22, 0.05) !important;
  }

  #formacoes .course-card.course-card-featured:hover,
  #formacoes .course-card.course-card-featured:focus-within {
    background: var(--color-dark) !important;
  }
}