/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:rgba(31,26,23,0.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(74,63,56,0.5)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:4rem}
.site-header__logo{font-family:var(--font-serif);font-size:1.25rem;font-weight:700}
.site-header__logo span{font-weight:400;color:var(--color-muted-fg)}
.site-header__nav{display:none;gap:0.25rem;align-items:center}
@media(min-width:768px){.site-header__nav{display:flex}}
.site-header__tab{padding:0.5rem 1rem;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-muted-fg);border:none;background:none;border-radius:0.25rem;cursor:pointer;transition:color 150ms,background 150ms}
.site-header__tab:hover{color:var(--color-fg);background:rgba(255,255,255,0.05)}
.site-header__tab.active{color:var(--color-fg);border-bottom:3px solid var(--color-primary)}
.site-header__mobile-toggle{display:flex;padding:0.5rem;background:none;border:none;color:var(--color-fg);cursor:pointer;font-size:1.5rem}
@media(min-width:768px){.site-header__mobile-toggle{display:none}}
.site-header__mobile-nav{display:none;padding:1rem;border-top:1px solid var(--color-border);flex-direction:column;gap:0.5rem}
.site-header__mobile-nav.open{display:flex}
.site-header__hub-link{padding:0.5rem 1rem;font-size:0.75rem;font-weight:500;border:1px solid var(--color-border);border-radius:0.25rem}
.site-header__hub-link:hover{border-color:var(--color-primary)}

/* HERO */
.hero{position:relative;width:100%;min-height:85vh;display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.5}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.9),rgba(0,0,0,0.7),transparent)}
.hero__content{position:relative;z-index:10;max-width:42rem;padding:2rem}
.hero__label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.4em;font-weight:500;margin-bottom:1rem;color:var(--color-primary)}
.hero__title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:1.5rem}
@media(min-width:640px){.hero__title{font-size:3.25rem}}
@media(min-width:1024px){.hero__title{font-size:4.5rem}}
.hero__tagline{font-size:1.125rem;color:rgba(255,255,255,0.7);margin-bottom:2rem}
.hero__cta{display:inline-flex;align-items:center;gap:0.75rem;padding:1rem 2rem;border:2px solid var(--color-primary);color:var(--color-primary);font-weight:500;font-size:0.875rem;text-transform:uppercase;letter-spacing:0.1em;background:transparent;cursor:pointer;transition:background 300ms,transform 150ms}
.hero__cta:hover{background:rgba(255,255,255,0.1)}
.hero__cta:active{transform:scale(0.97)}

/* CAROUSEL */
.carousel-section{padding:4rem 0}
@media(min-width:1024px){.carousel-section{padding:6rem 0}}
.section-title{font-size:1.5rem;font-weight:700;margin-bottom:2rem}
.carousel-track{display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:1rem}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-card{flex-shrink:0;width:300px;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;background:var(--color-card);transition:transform 300ms,box-shadow 300ms}
@media(min-width:768px){.carousel-card{width:350px}}
.carousel-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.carousel-card__img{width:100%;height:200px;object-fit:cover}
.carousel-card__body{padding:1.25rem}
.carousel-card__cat{font-size:0.625rem;text-transform:uppercase;letter-spacing:0.15em;font-weight:600;margin-bottom:0.5rem;color:var(--color-primary)}
.carousel-card__title{font-family:var(--font-serif);font-size:1rem;font-weight:700;color:var(--color-card-fg);margin-bottom:0.5rem}
.carousel-card__excerpt{font-size:0.8125rem;color:var(--color-muted-fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* COLUMNISTS */
.columnists{padding:4rem 0;background:rgba(51,44,40,0.3)}
.columnists__grid{display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:1rem}
.columnists__grid::-webkit-scrollbar{display:none}
.columnist-card{flex-shrink:0;width:200px;text-align:center;padding:1.5rem 1rem}
.columnist-card__avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:3px solid var(--color-primary)}
.columnist-card__name{font-family:var(--font-serif);font-size:0.875rem;font-weight:700;margin-bottom:0.25rem}
.columnist-card__role{font-size:0.75rem;color:var(--color-muted-fg)}
.columnist-card__badge{display:inline-block;margin-top:0.5rem;padding:0.125rem 0.5rem;font-size:0.625rem;text-transform:uppercase;letter-spacing:0.1em;border-radius:9999px;background:rgba(200,121,65,0.15);color:var(--color-primary)}

/* ZIGZAG */
.zigzag{padding:4rem 0}
@media(min-width:1024px){.zigzag{padding:6rem 0}}
.zigzag__item{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;margin-bottom:4rem}
@media(min-width:768px){.zigzag__item{grid-template-columns:1fr 1fr;gap:4rem}.zigzag__item:nth-child(even) .zigzag__img{order:2}}
.zigzag__img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius)}
@media(min-width:768px){.zigzag__img{height:400px}}
.zigzag__title{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
@media(min-width:1024px){.zigzag__title{font-size:2rem}}
.zigzag__text{font-size:1rem;color:var(--color-muted-fg);line-height:1.8}

/* QUIZ */
.quiz{padding:4rem 0}
@media(min-width:1024px){.quiz{padding:6rem 0}}
.quiz__card{max-width:40rem;margin:0 auto;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:2rem}
@media(min-width:768px){.quiz__card{padding:3rem}}
.quiz__title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:0.5rem}
.quiz__subtitle{font-size:0.875rem;color:var(--color-muted-fg);text-align:center;margin-bottom:2rem}
.quiz__progress{height:4px;background:var(--color-secondary);border-radius:9999px;margin-bottom:2rem;overflow:hidden}
.quiz__progress-bar{height:100%;background:var(--color-primary);border-radius:9999px;transition:width 300ms}
.quiz__option{display:block;width:100%;padding:1rem 1.25rem;margin-bottom:0.75rem;background:var(--color-secondary);border:1px solid var(--color-border);border-radius:0.375rem;color:var(--color-fg);font-size:0.875rem;text-align:left;cursor:pointer;transition:border-color 150ms,background 150ms}
.quiz__option:hover{border-color:var(--color-primary);background:rgba(200,121,65,0.1)}
.quiz__option.selected{border-color:var(--color-primary);background:rgba(200,121,65,0.15)}
.quiz__result{text-align:center;padding:2rem 0;display:none}
.quiz__result.show{display:block}
.quiz__result-title{font-size:1.25rem;font-weight:700;margin-bottom:1rem}
.quiz__result-colors{display:flex;justify-content:center;gap:0.75rem;margin-top:1.5rem}
.quiz__result-swatch{width:48px;height:48px;border-radius:50%;border:2px solid var(--color-border)}

/* PALETTES */
.palettes{padding:4rem 0;background:rgba(51,44,40,0.3)}
@media(min-width:1024px){.palettes{padding:6rem 0}}
.palettes__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:640px){.palettes__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.palettes__grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.palettes__grid{grid-template-columns:repeat(6,1fr)}}
.swatch{border-radius:var(--radius);overflow:hidden;background:var(--color-card);border:1px solid var(--color-border);cursor:pointer;transition:transform 200ms,box-shadow 200ms}
.swatch:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.swatch__color{width:100%;height:80px}
.swatch__info{padding:0.75rem}
.swatch__name{font-size:0.75rem;font-weight:600;margin-bottom:0.25rem}
.swatch__hex{font-size:0.625rem;color:var(--color-muted-fg);font-family:monospace}

/* SATELLITES */
.satellites{padding:4rem 0}
@media(min-width:1024px){.satellites{padding:6rem 0}}
.satellites__grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.satellites__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.satellites__grid{grid-template-columns:repeat(3,1fr)}}
.satellite-card{display:block;padding:1.5rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);transition:border-color 150ms,transform 150ms}
.satellite-card:hover{border-color:var(--color-primary);transform:translateY(-2px)}
.satellite-card__name{font-family:var(--font-serif);font-size:1rem;font-weight:700;margin-bottom:0.5rem}
.satellite-card__focus{font-size:0.8125rem;color:var(--color-muted-fg);margin-bottom:0.75rem}
.satellite-card__sponsor{font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-primary)}

/* FOOTER */
.site-footer{border-top:1px solid var(--color-border);padding:4rem 0 2rem;background:rgba(18,14,12,0.5)}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:3rem}
@media(min-width:640px){.site-footer__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.site-footer__grid{grid-template-columns:repeat(4,1fr)}}
.site-footer__col-title{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.15em;font-weight:600;margin-bottom:1rem}
.site-footer__link{display:block;font-size:0.8125rem;color:var(--color-muted-fg);margin-bottom:0.5rem;transition:color 150ms}
.site-footer__link:hover{color:var(--color-fg)}
.site-footer__disclaimer{padding:1.5rem;background:rgba(200,150,50,0.08);border:1px solid rgba(200,150,50,0.2);border-radius:0.375rem;margin-bottom:2rem}
.site-footer__disclaimer p{font-size:0.75rem;color:var(--color-muted-fg);line-height:1.6;margin:0}
.site-footer__bottom{padding-top:1.5rem;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:0.5rem;align-items:center;text-align:center}
@media(min-width:768px){.site-footer__bottom{flex-direction:row;justify-content:space-between}}
.site-footer__bottom p{font-size:0.75rem;color:var(--color-muted-fg);margin:0}

/* COMPLIANCE BANNER */
.compliance-banner{padding:1.5rem 0;border-top:1px solid rgba(74,63,56,0.5);border-bottom:1px solid rgba(74,63,56,0.5)}
.compliance-banner a{display:flex;align-items:center;justify-content:center;gap:0.75rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--color-muted-fg)}
.compliance-banner a:hover{color:var(--color-fg)}
.compliance-banner__dot{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--color-primary)}

/* ARTICLE PAGE */
.article-page{padding:3rem 1rem 6rem;max-width:48rem;margin:0 auto}
.article-page__img{width:100%;height:400px;object-fit:cover;border-radius:var(--radius);margin-bottom:2rem}
@media(min-width:1024px){.article-page__img{height:500px}}
.article-page__title{font-size:2rem;font-weight:700;margin-bottom:1rem}
@media(min-width:1024px){.article-page__title{font-size:3rem}}
.article-page__meta{font-size:0.8125rem;color:var(--color-muted-fg);margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--color-border)}
.article-page__content{font-size:1.0625rem;line-height:1.8}
.article-page__content h2{font-size:1.5rem;margin-top:2.5rem;margin-bottom:1rem}
.article-page__content p{margin-bottom:1.25rem}
.article-page__content ul{padding-left:1.5rem;margin-bottom:1.5rem;list-style:disc}
.article-page__content li{margin-bottom:0.5rem;color:var(--color-muted-fg)}

/* COMPLIANCE PAGES */
.compliance-page{padding:3rem 1rem 6rem;max-width:48rem;margin:0 auto}
.compliance-page h1{font-size:2.5rem;margin-bottom:2rem}
.compliance-page h2{font-size:1.5rem;margin-top:2.5rem;margin-bottom:1rem}
.compliance-page p{font-size:1.0625rem;line-height:1.8;color:var(--color-muted-fg);margin-bottom:1rem}
.compliance-page ul,.compliance-page ol{padding-left:1.5rem;margin-bottom:1.5rem;list-style:disc}
.compliance-page li{font-size:0.875rem;color:var(--color-muted-fg);margin-bottom:0.5rem}
.compliance-page strong{color:var(--color-fg)}

/* GATEWAY */
.gateway{min-height:100vh;display:flex;flex-direction:column}
.gateway__header{padding:1.5rem 0;border-bottom:1px solid var(--color-border)}
.gateway__logo{font-family:var(--font-serif);font-size:1.5rem;font-weight:700}
.gateway__logo span{font-weight:400;color:var(--color-muted-fg)}
.gateway__grid{flex:1;display:grid;grid-template-columns:1fr}
@media(min-width:768px){.gateway__grid{grid-template-columns:1fr 1fr}}
.gateway__card{position:relative;display:flex;align-items:flex-end;padding:3rem 2rem;min-height:50vh;overflow:hidden;transition:transform 300ms}
@media(min-width:768px){.gateway__card{min-height:100vh;padding:4rem}}
.gateway__card:hover{transform:scale(1.01)}
.gateway__card-bg{position:absolute;inset:0;opacity:0.4;background-size:cover;background-position:center;transition:opacity 300ms}
.gateway__card:hover .gateway__card-bg{opacity:0.55}
.gateway__card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.3) 60%,transparent 100%)}
.gateway__card-content{position:relative;z-index:10}
.gateway__card-label{font-size:0.625rem;text-transform:uppercase;letter-spacing:0.3em;font-weight:600;margin-bottom:0.75rem}
.gateway__card-title{font-size:2rem;font-weight:700;color:#fff;margin-bottom:0.75rem}
@media(min-width:1024px){.gateway__card-title{font-size:2.5rem}}
.gateway__card-desc{font-size:0.875rem;color:rgba(255,255,255,0.7);margin-bottom:1.5rem;max-width:24rem}
.gateway__card-cta{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border:1px solid;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.15em;font-weight:500;color:#fff;background:transparent}
.gateway__card-cta:hover{background:rgba(255,255,255,0.1)}

/* HUB BELEZA OVERRIDES */
.hub-beleza .site-header__tab.active{border-bottom-color:var(--color-rosa)}
.hub-beleza .hero__cta{border-color:var(--color-rosa);color:var(--color-rosa)}
.hub-beleza .hero__label{color:var(--color-rosa)}
.hub-beleza .compliance-banner__dot{background:var(--color-rosa)}
.hub-beleza .quiz__option:hover{border-color:var(--color-rosa);background:rgba(200,90,138,0.1)}
.hub-beleza .quiz__option.selected{border-color:var(--color-rosa);background:rgba(200,90,138,0.15)}
.hub-beleza .quiz__progress-bar{background:var(--color-rosa)}
.hub-beleza .columnist-card__avatar{border-color:var(--color-rosa)}
.hub-beleza .columnist-card__badge{background:rgba(200,90,138,0.15);color:var(--color-rosa)}
.hub-beleza .satellite-card:hover{border-color:var(--color-rosa)}
.hub-beleza .satellite-card__sponsor{color:var(--color-rosa)}
.hub-beleza .carousel-card__cat{color:var(--color-rosa)}