/* ============================================================
   SERIUM — HOME PAGE STYLES (extraído de index.php)
   Namespace: .sh-* (desktop), .m-* (mobile), .home-*
   Carregado apenas na home via includes/header.php
   ============================================================ */

/* ─── HOME REDESIGN — SCOPED STYLES ─── */

/* HERO — fullscreen background */
.sh-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.sh-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}
.sh-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}
.sh-hero__image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, var(--bg) 0%, var(--bg) 20%, rgba(248,243,238,0.7) 40%, transparent 65%);
    z-index: 1;
}
.sh-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    padding: 48px 40px 80px clamp(24px, 8vw, 100px);
    position: relative;
    z-index: 2;
}
@media (max-width: 900px) {
    .sh-hero__text {
        padding: 40px 20px 60px 20px;
    }
}
.sh-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin: 0 0 32px;
}
.sh-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(60px, min(7vw, 8vh), 104px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--primary);
    margin: 0 0 clamp(12px, 2vh, 20px);
    letter-spacing: -0.01em;
}
.sh-hero__title-main {
    font-size: clamp(68px, min(7.8vw, 9.5vh), 120px);
    font-weight: 600;
    line-height: 1.15;
    display: block;
}
.sh-hero__title-em {
    font-weight: 500;
    font-size: clamp(34px, min(3.8vw, 5.5vh), 54px);
    color: var(--primary);
    line-height: 1.15;
    font-style: italic;
    display: block;
    margin-top: clamp(24px, 4vh, 50px);
}
.sh-hero__subtitle {
    font-size: clamp(15px, min(1.2vw, 1.8vh), 17px);
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 clamp(16px, 2.5vh, 28px);
    max-width: 420px;
}
.sh-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.sh-hero__scroll {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    animation: scrollBounce 2s ease-in-out infinite;
}
.sh-hero__scroll svg {
    width: 20px;
    height: 20px;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

/* TRUST BADGES — seção dedicada abaixo do hero */
.sh-trust-badges {
    padding: 48px 80px;
    background: var(--bg);
    border-bottom: 1px solid rgba(214, 207, 199, 0.15);
}
.sh-trust-badges__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.sh-trust-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid rgba(214, 207, 199, 0.15);
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sh-trust-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(43, 36, 32, 0.06);
}
.sh-trust-badge img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.sh-trust-badge__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sh-trust-badge__text strong {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
}
.sh-trust-badge__text span {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}
@media (max-width: 768px) {
    .sh-trust-badges { padding: 32px var(--m-margin); }
    .sh-trust-badges__inner { grid-template-columns: 1fr; gap: 12px; }
    .sh-trust-badge { padding: 16px; gap: 12px; }
    .sh-trust-badge img { width: 32px; height: 32px; }
}

/* PATHS & MANIFESTO & HOW */
.sh-paths {
    padding: 140px 80px;
    background: linear-gradient(135deg, rgba(61, 79, 60, 0.12) 0%, rgba(61, 79, 60, 0.02) 100%);
}
.sh-paths__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}
.sh-paths__header {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.sh-paths__heading {
    font-family: var(--font-heading);
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    line-height: 1.1;
}
.sh-paths__intro {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

.sh-path-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.sh-path-list-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    transition: transform 0.3s ease;
}
.sh-path-list-item:hover {
    transform: translateX(8px);
}
.sh-path-list-item__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.sh-path-list-item__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.sh-path-list-item__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sh-path-list-item__title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--primary);
    margin: 0;
    line-height: 1.2;
}
.sh-path-list-item__desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* SITUAÇÕES */
.sh-manifesto {
    position: relative;
    padding: 160px 80px;
    background: var(--bg-alt);
}
.sh-manifesto::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: var(--manifesto-bg, url('/uploads/site/serium-psicologia-manifesto.webp')) center / cover no-repeat;
    z-index: 0;
    pointer-events: none;
}
.sh-manifesto::after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to left, rgba(248,243,238,0.88) 0%, rgba(248,243,238,0.88) 35%, rgba(248,243,238,0.4) 55%, transparent 75%);
    z-index: 1;
    pointer-events: none;
}
.sh-manifesto__inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: clamp(40px, 6vw, 120px);
}
.sh-manifesto__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 24px;
}
.sh-manifesto__title {
    font-family: var(--font-heading);
    font-size: clamp(40px, 4vw, 60px);
    font-weight: 600;
    color: var(--primary);
    line-height: 1.1;
    margin: 0;
}
.sh-manifesto__body {
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0 0 24px;
}
.home-situacoes-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.home-situacoes-lista li {
    padding: 10px 16px;
    background: rgba(194, 134, 107, 0.08);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
}
.home-situacoes-lista li::before {
    content: "→ ";
    color: var(--accent);
    margin-right: 6px;
    font-weight: 600;
}
.sh-manifesto__link {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: var(--primary);
    text-decoration: none;
    border-radius: 999px;
    padding: 12px 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(43, 36, 32, 0.04);
}
.sh-manifesto__link:hover {
    background: var(--text);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(43, 36, 32, 0.10);
    text-decoration: none;
    color: #ffffff;
}

/* TERAPIA GRID */
.home-terapia {
    padding: 140px 80px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}
.home-terapia::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: var(--terapia-bg, none) center / cover no-repeat;
    z-index: 0;
    pointer-events: none;
}
.home-terapia::after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(248,243,238,0.75) 0%, rgba(248,243,238,0.3) 45%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.home-terapia > * {
    position: relative;
    z-index: 2;
}
.home-terapia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 600px) {
    .home-terapia-grid {
        grid-template-columns: 1fr;
    }
}
.home-terapia-card .serium-icon-img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    grid-row: 1 / 3;
    align-self: center;
}
.home-terapia-card__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    line-height: 1.3;
    text-align: left;
    text-wrap: balance;
}
.home-terapia-card__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}
.home-note {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    padding: 22px 26px;
    background: rgba(228, 213, 202, 0.55);
    border: 1px solid rgba(214, 207, 199, 0.4);
    border-left: 4px solid var(--accent);
    border-radius: 16px;
    max-width: 720px;
}
.home-note__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}
.home-note__text {
    margin: 1px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    font-weight: 500;
    text-wrap: pretty;
}
.home-terapia-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    align-items: start;
    background: rgba(248,243,238,0.65);
    border: 1px solid rgba(214, 207, 199, 0.15);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(43, 36, 32, 0.02);
}

/* HOW IT WORKS */
.sh-how {
    position: relative;
    padding: 160px 80px;
    background: var(--surface-soft);
}
.sh-how::before {
    content: '';
    position: absolute;
    right: 0; top: 0;
    width: 48%;
    bottom: 0;
    background: var(--how-bg, url('/uploads/site/serium-psicologia-como-funciona.webp')) 40% center / cover no-repeat;
    mask-image: linear-gradient(to left, black 0%, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 0%, black 50%, transparent 100%);
    opacity: 0.22;
    z-index: 0;
    pointer-events: none;
}
.sh-how__inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}
.sh-how__header {
    text-align: center;
    margin-bottom: 80px;
}
.sh-how__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 20px;
}
.sh-how__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--primary);
    margin: 0 auto;
    line-height: 1.15;
}
.sh-how__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    position: relative;
}
.sh-how-step__num {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 300;
    color: var(--accent);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(194,134,107,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}
.sh-how-step__title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 14px;
    line-height: 1.3;
}
.sh-how-step__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}

/* ESCOLHA COM CALMA */
.sh-about {
    position: relative;
    width: 100%;
    padding: 0;
    background: linear-gradient(180deg, #eddfd6 0%, var(--bg) 40%);
}
.sh-about > * {
    position: relative;
    z-index: 1;
}
.sh-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: none;
}
.sh-about__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-strong);
    margin-bottom: 24px;
}
.sh-about__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
}
.sh-about__media {
    background: var(--about-bg, #EDE3DA) center / cover no-repeat;
    min-height: 680px;
    height: 100%;
    box-shadow: none;
    border-radius: 0;
}
.sh-about__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 120px clamp(48px, 7vw, 120px);
}
.sh-about__pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 32px;
}
.sh-about-pillar {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    align-items: start;
    background: rgba(248,243,238,0.65);
    border: 1px solid rgba(214, 207, 199, 0.15);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(43, 36, 32, 0.02);
}
.sh-about-pillar .sh-path-list-item__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    grid-row: 1 / 3;
    align-self: center;
}
.sh-about-pillar__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    line-height: 1.3;
    text-align: left;
    text-wrap: balance;
}
.sh-about-pillar__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    text-wrap: pretty;
}

/* CTA FINAL */
.sh-cta {
    padding: 120px 80px 140px;
    background: var(--bg);
}
.sh-cta__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.sh-cta__box {
    position: relative;
    overflow: hidden;
    background: var(--bg-alt);
    border-radius: 16px;
    padding: 100px 80px;
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 40px 80px;
    align-items: center;
}
.sh-cta__box::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    background: var(--cta-bg, url('/uploads/site/serium-psicologia-cta-final-a.webp')) center bottom / cover no-repeat;
    mask-image: linear-gradient(to top, black 0%, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 40%, transparent 100%);
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}
.sh-cta__box > * {
    position: relative;
    z-index: 1;
}
.sh-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 16px;
    line-height: 1.1;
}
.sh-cta__body {
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
    max-width: 480px;
}
.sh-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 240px;
    padding-right: 48px;
}
.sh-cta__actions .btn {
    text-align: center;
    width: 100%;
}

/* CTA FINAL MOBILE — footer sobrepõe o background */
@media (max-width: 768px) {
    .brand-footer-mobile-only {
        margin-top: -110px !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .brand-footer-mobile-only footer.brand-footer {
        background: linear-gradient(to bottom, rgba(228,213,202,0.92) 0%, var(--surface) 100%) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* RESPONSIVE OVERRIDES */
@media (max-width: 960px) {
    .sh-hero { grid-template-columns: 1fr; min-height: auto; }
    .sh-hero__text { padding: 80px 40px; }
    .sh-hero__image { height: 50vw; }
    .sh-paths { padding: 80px 40px; }
    .sh-paths__header { grid-template-columns: 1fr; gap: 20px; }
    .sh-manifesto { padding: 100px 40px; }
    .sh-manifesto::before,
    .sh-manifesto::after { display: none; }
    .sh-manifesto__inner { justify-content: flex-start; padding-right: 0; }
    .sh-how { padding: 100px 40px; }
    .sh-how::before { display: none; }
    .sh-how__steps { grid-template-columns: 1fr; gap: 40px; }
    .sh-terapia { padding: 100px 40px; }
    .sh-about { padding: 80px 40px; }
    .sh-about__pillars { grid-template-columns: 1fr; gap: 12px; }
    .sh-about__inner { grid-template-columns: 1fr; gap: 40px; max-width: 1100px; margin: 0 auto; }
    .sh-about__content { padding: 0; }
    .sh-about__pillars { grid-template-columns: 1fr; gap: 12px; }
    .sh-cta { padding: 0 40px 100px; }
    .sh-cta__box { grid-template-columns: 1fr; padding: 64px 48px; gap: 40px; }
    .sh-cta__actions { padding-right: 0; }
    .sh-cta__box::before { display: none; }
    .sh-cta__actions { flex-direction: row; flex-wrap: wrap; }
    .sh-cta__actions .btn { width: auto; }
}

/* FEATURED CAROUSEL SECTION */
.sh-featured {
    padding: 60px 80px 72px;
    background: var(--bg);
}
.sh-featured__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.sh-featured__header {
    margin-bottom: 32px;
    text-align: center;
}
.sh-featured__title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}
.sh-featured__carousel-wrapper {
    position: relative;
    width: 100%;
}
.sh-featured__carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 0;
}
.sh-featured__carousel::-webkit-scrollbar {
    display: none;
}
.sh-featured__card {
    flex: 0 0 calc(33.333% - 16px);
    scroll-snap-align: start;
    background: #FBF8F4;
    border: 1px solid rgba(214, 207, 199, 0.12);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px rgba(43, 36, 32, 0.01);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}
.sh-featured__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(43, 36, 32, 0.06);
    border-color: rgba(214, 207, 199, 0.25);
}
.sh-featured__card-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-alt);
    flex-shrink: 0;
}
.sh-featured__card-portrait img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}
.sh-featured__card-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-strong);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sh-featured__card-location {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(214, 207, 199, 0.3);
    background: var(--surface);
    color: var(--primary-strong);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(43, 36, 32, 0.08);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
}
.sh-featured__carousel-wrapper:hover .sh-carousel-btn {
    opacity: 1;
}
.sh-carousel-btn:hover {
    box-shadow: 0 6px 16px rgba(43, 36, 32, 0.12);
    border-color: rgba(214, 207, 199, 0.5);
}
.sh-carousel-btn--prev { left: -20px; }
.sh-carousel-btn--next { right: -20px; }

@media (max-width: 900px) {
    .sh-carousel-btn { display: none !important; }
}

@media (max-width: 860px) {
    .sh-hero__text { padding: 60px 32px; }
    .sh-hero__image { height: 40vw; }
    .sh-paths { padding: 64px 32px; }
    .sh-path-card { padding: 40px 32px; }
    .sh-manifesto { padding: 80px 32px; }
    .sh-manifesto::before,
    .sh-manifesto::after { display: none; }
    .sh-manifesto__inner { justify-content: flex-start; padding-right: 0; }
    .sh-how { padding: 80px 32px; }
    .sh-terapia { padding: 80px 32px; }
    .sh-about { padding: 80px 32px; }
    .sh-cta { padding: 0 32px 80px; }
    .sh-cta__box { padding: 48px 32px; }
}

@media (max-width: 900px) {
    .sh-featured { padding: 40px 24px; }
    .sh-featured__carousel { gap: 16px; }
    .sh-featured__card { flex: 0 0 calc(50% - 8px); width: calc(50% - 8px); max-width: calc(50% - 8px); padding: 12px; gap: 8px; }
    .sh-featured__card-name { font-size: 16px; }
    .sh-featured__card-portrait { aspect-ratio: 3 / 4; }
    .sh-carousel-btn { opacity: 1 !important; }
}

@media (max-width: 600px) {
    .sh-featured { margin: 24px 16px !important; padding: 48px 16px !important; border-radius: 24px !important; }
    .sh-featured__carousel { gap: 16px !important; }
    .sh-featured__card { flex: 0 0 calc(50% - 8px) !important; width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; padding: 10px !important; border-radius: 16px !important; gap: 8px !important; }
    .sh-featured__card-name { font-size: 14px !important; }
    
    .sh-hero__text { padding: 48px 16px !important; }
    .sh-hero__image { display: none !important; }
    .sh-hero { grid-template-columns: 1fr !important; }
    
    .sh-paths { padding: 48px 16px !important; }
    .sh-path-card { padding: 32px 16px !important; }
    .sh-manifesto { padding: 48px 16px !important; }
    .sh-manifesto::before,
    .sh-manifesto::after { display: none !important; }
    .sh-manifesto__inner { justify-content: flex-start !important; padding-right: 0 !important; }
    .sh-how { padding: 48px 16px !important; }
    .sh-terapia { padding: 48px 16px !important; }
    .sh-about { padding: 48px 16px !important; }
    .sh-about__inner { gap: 24px !important; }
    .sh-cta { padding: 0 16px 48px !important; }
    .sh-cta__box { padding: 32px 16px !important; }
}

.hero-emphasis { font-style: italic; font-weight: 300; }
.sh-featured__card-portrait--fallback { background: var(--bg-alt); }
.sh-manifesto__body:last-of-type { margin-bottom: 36px; }

@media (max-width: 768px) {
    .m-section-title.ta-left { text-align: left; margin-bottom: 24px; }
}
.m-psicoterapia-bg {
    position: relative;
    overflow: hidden;
}
.m-psicoterapia-bg::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: var(--m-psy-bg, none) no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
    pointer-events: none;
}
.m-psicoterapia-bg::after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(248,243,238,0.92) 0%, rgba(248,243,238,0.4) 50%, transparent 75%);
    z-index: 1;
    pointer-events: none;
}
.m-psicoterapia-bg > * {
    position: relative;
    z-index: 2;
}
@media (max-width: 768px) {
    .home-note { padding: 16px 18px; gap: 12px; }
    .home-note__icon { width: 32px; height: 32px; }
    .home-note__text { font-size: 15px; }
    .sh-about-pillar { padding: 20px; grid-template-columns: 36px 1fr; gap: 14px; }
    .sh-about-pillar .sh-path-list-item__icon { width: 36px; height: 36px; }
    .sh-about-pillar__title { font-size: 16px; }
    .sh-about-pillar__body { font-size: 13px; line-height: 1.5; }
}

/* ─── HOW 2-COL SECTION (seção 5 — Como funciona + destaque) ─── */
.sh-how-2col-section { position: relative; overflow: hidden; }
.sh-how-2col-section::before {
    content: '';
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    mask: none;
    -webkit-mask: none;
    opacity: 1;
    background: url('/uploads/site/serium-psicologia-banner-como-funciona.webp?v=20260813') center / cover no-repeat;
    pointer-events: none;
    z-index: 0;
}
.sh-how-2col-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(55,70,55,0.98) 0%, rgba(55,70,55,0.75) 100%);
    pointer-events: none;
    z-index: 1;
}
.sh-how-2col-section > * { position: relative; z-index: 2; }
.sh-how-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}
.sh-how-2col > div {
    min-width: 0;
}
.sh-how-2col__steps {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.sh-how-2col__step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.sh-how-step__num {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.sh-how-2col__carousel {
    background: rgba(248,243,238,0.10);
    border: 1px solid rgba(248,243,238,0.12);
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 8px 32px rgba(43, 36, 32, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.sh-how-2col__carousel .sh-featured__carousel {
    gap: 24px !important;
}
.sh-how-2col__carousel .sh-featured__header { text-align: center; }
.sh-how-2col__carousel .sh-featured__title { color: var(--bg) !important; }
.sh-how-2col__carousel .sh-featured__card-name { color: var(--bg); }
.sh-how-2col__carousel .sh-featured__card-location { color: rgba(248,243,238,0.7); }
.sh-how-2col__carousel .sh-featured__card {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    background: rgba(248,243,238,0.12);
    border: 1px solid rgba(248,243,238,0.15);
    box-shadow: 0 2px 8px rgba(43, 36, 32, 0.04);
}
@media (max-width: 900px) {
    .sh-how-2col {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}
.sh-how-2col .sh-how__label { color: rgba(248,243,238,0.7); }
.sh-how-2col .sh-how__title { color: var(--bg); }
.sh-how-2col .sh-how-step__title { color: var(--bg); }
.sh-how-2col .sh-how-step__body { color: rgba(248,243,238,0.8); }
.sh-how-2col .sh-featured__title { color: var(--bg) !important; }
.sh-how__title-num {
    font-family: var(--font-heading);
    font-size: clamp(110px, 12vw, 165px);
    font-weight: 300;
    line-height: 0.92;
    float: left;
    margin-right: 20px;
    margin-top: 6px;
    color: rgba(248,243,238,0.65);
}
@media (max-width: 768px) {
    .sh-how__title-num {
        font-size: clamp(72px, 18vw, 100px);
        margin-right: 12px;
        margin-top: 4px;
    }
}

/* ─── MOBILE — lista de situações no manifesto ─── */
.m-manifesto .home-situacoes-lista li { font-size: 11px; background: rgba(248,243,238,0.55); }