/* =====================================================================
   BLACK 2026 | ISA PRA SEMPRE :: SECAO 3 "o modelo"
   Painel editorial claro: Isa (esquerda) + headline, apoio e 4 mini-cards.
   Oculta as antigas "Como se manter atualizada em" (61ee87c, d95b2ae)
   e "E humanamente impossivel..." (7c5650c). Nada mais e alterado.
   ===================================================================== */

.elementor-11664 > .elementor-element.elementor-element-61ee87c,
.elementor-11664 > .elementor-element.elementor-element-d95b2ae,
.elementor-11664 > .elementor-element.elementor-element-7c5650c { display: none !important; }

.s3-26 {
    --s3-bg-1: #f7f1e9;
    --s3-bg-2: #eee2d3;
    --s3-bg-3: #dcc7ad;
    --s3-ink: #24170c;
    --s3-ink-soft: #4b3625;
    --s3-caramel: #9a6c30;
    --s3-gold: #b8894a;
    --s3-card: #fffaf3;
    --s3-line: rgba(176, 140, 86, .24);
    --s3-display: "Bigola Display", "Laviossa", Georgia, serif;
    --s3-text: "Poppins", "Plus Jakarta Sans", Arial, sans-serif;

    background: linear-gradient(180deg, #120c08 0%, #0e0907 100%);
    padding: clamp(18px, 2vw, 28px) 24px clamp(80px, 7vw, 104px);
}

/* ---------- painel ---------- */
.s3-26__panel {
    position: relative;
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 46% 54%;
    min-height: 600px;
    border-radius: 32px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 48% 70% at 24% 72%, rgba(255, 250, 240, .85) 0%, rgba(255, 250, 240, 0) 70%),   /* luz atras da Isa */
        radial-gradient(ellipse 60% 55% at 92% 8%, rgba(214, 180, 118, .20) 0%, rgba(214, 180, 118, 0) 70%),    /* brilho dourado discreto */
        linear-gradient(125deg, var(--s3-bg-1) 0%, var(--s3-bg-2) 55%, var(--s3-bg-3) 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.s3-26__panel::after {                        /* filete champagne na borda do painel */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(232, 212, 170, .55);
    pointer-events: none;
    z-index: 3;
}

/* ---------- imagem (desktop) ---------- */
.s3-26__media {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    min-height: 100%;
    z-index: 1;
}
.s3-26__media picture { display: contents; }
.s3-26__img {
    position: absolute;
    bottom: 0;
    right: -9%;                               /* leve sangria para dentro do conteudo */
    height: 91%;
    width: auto;
    max-width: none;
    display: block;
    /* a mesa/braco se dissolvem no painel: sem linha dura entre foto e conteudo */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 98%);
            mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 98%);
}

/* ---------- conteudo ---------- */
.s3-26__content {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    padding: clamp(48px, 4.6vw, 68px) clamp(40px, 4.4vw, 64px) clamp(48px, 4.6vw, 64px) clamp(16px, 1.6vw, 24px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}
.s3-26__title {
    margin: 0 0 18px;
    max-width: 17em;
    font-family: var(--s3-display);
    font-weight: 400;
    font-size: clamp(27px, 2.45vw, 38px);
    line-height: 1.14;
    letter-spacing: 0;
    text-transform: none;
    color: var(--s3-ink);
    text-wrap: balance;
}
.s3-26__title em {
    font-style: italic;
    background: linear-gradient(100deg, #b98b45 0%, #9a6c30 60%, #7f5724 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: .05em;
}
.s3-26__lead {
    margin: 0 0 28px;
    max-width: 31em;
    font-family: var(--s3-text);
    font-weight: 400;
    font-size: clamp(14.5px, 1.08vw, 16px);
    line-height: 1.7;
    color: var(--s3-ink-soft);
}

/* ---------- 4 mini-cards ---------- */
.s3-26__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    max-width: 520px;
}
.s3-26__card {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 18px 13px 14px;
    background: linear-gradient(180deg, #fffcf7 0%, var(--s3-card) 100%);
    border: 1px solid var(--s3-line);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(92, 62, 24, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.s3-26__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #fbf1dc 0%, #f1e2c4 100%);
    border: 1px solid rgba(184, 137, 74, .22);
}
.s3-26__ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--s3-gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.s3-26__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s3-26__txt strong {
    font-family: var(--s3-text);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--s3-caramel);
}
.s3-26__txt span {
    font-family: var(--s3-text);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--s3-ink-soft);
}
@media (hover: hover) and (min-width: 1025px) {
    .s3-26__card:hover {
        transform: translateY(-2px);
        border-color: rgba(176, 140, 86, .42);
        box-shadow: 0 10px 24px rgba(92, 62, 24, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
        transition-delay: 0s !important;
    }
}

/* =====================================================================
   TABLET (768 a 1024px): duas colunas proprias, imagem tablet
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .s3-26 { padding: 16px 20px 64px; }
    .s3-26__panel { grid-template-columns: 42% 58%; min-height: 0; border-radius: 26px; }
    .s3-26__img {
        right: auto;
        left: -6%;
        width: 118%;
        height: auto;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
                mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
    }
    .s3-26__content { padding: 40px 32px 40px 12px; }
    .s3-26__title { font-size: clamp(22px, 2.9vw, 28px); margin-bottom: 12px; }
    .s3-26__lead { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
    .s3-26__cards { gap: 8px; }
    .s3-26__card { padding: 10px 14px 10px 10px; gap: 12px; border-radius: 11px; }
    .s3-26__ico { width: 34px; height: 34px; }
    .s3-26__ico svg { width: 17px; height: 17px; }
    .s3-26__txt strong { font-size: 11px; letter-spacing: .11em; }
    .s3-26__txt span { font-size: 12.5px; line-height: 1.45; }
}

/* =====================================================================
   MOBILE (ate 767px): uma coluna; Isa fecha o painel embaixo
   ===================================================================== */
@media (max-width: 767px) {
    .s3-26 { padding: 8px 14px 52px; }
    .s3-26__panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 24px;
        background:
            radial-gradient(ellipse 80% 40% at 50% 88%, rgba(255, 250, 240, .9) 0%, rgba(255, 250, 240, 0) 70%),
            radial-gradient(ellipse 70% 30% at 90% 4%, rgba(214, 180, 118, .18) 0%, rgba(214, 180, 118, 0) 70%),
            linear-gradient(160deg, var(--s3-bg-1) 0%, var(--s3-bg-2) 55%, var(--s3-bg-3) 100%);
    }
    .s3-26__content { order: 1; padding: 34px 20px 8px; text-align: left; }
    .s3-26__title { font-size: clamp(24px, 6.6vw, 28px); margin-bottom: 12px; max-width: none; }
    .s3-26__lead { font-size: 14.5px; line-height: 1.62; margin-bottom: 20px; }
    .s3-26__cards { gap: 8px; max-width: none; }
    .s3-26__card { padding: 11px 14px 11px 11px; gap: 12px; border-radius: 11px; }
    .s3-26__ico { width: 34px; height: 34px; }
    .s3-26__ico svg { width: 17px; height: 17px; }
    .s3-26__txt strong { font-size: 11px; letter-spacing: .1em; }
    .s3-26__txt span { font-size: 13px; line-height: 1.45; }

    /* a arte mobile tem margem transparente em cima (242px) e embaixo (144px) de 941:
       a moldura mostra so a area util, com a Isa encostada na base do painel */
    .s3-26__media {
        order: 2;
        position: relative;
        min-height: 0;
        margin: 18px auto 0;
        width: 94%;
        aspect-ratio: 941 / 1296;
        overflow: hidden;
    }
    .s3-26__img {
        position: static;
        width: 100%;
        height: auto;
        margin-top: -25.72%;
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* =====================================================================
   revelacao ao entrar na tela (so quando o JS preparou)
   ===================================================================== */
.s3-26--ready .s3-26__panel,
.s3-26--ready [data-rv3] { opacity: 0; transform: translateY(18px); }
.s3-26--ready .s3-26__card { transform: translateY(10px); }
.s3-26--ready .s3-26__img { opacity: .85; transform: scale(1.01); transform-origin: 50% 100%; }
.s3-26--ready.s3-26--in .s3-26__panel,
.s3-26--ready.s3-26--in [data-rv3] {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.s3-26--ready.s3-26--in .s3-26__img { opacity: 1; transform: none; transition: opacity 1s ease .1s, transform 1.2s ease .1s; }
.s3-26--ready.s3-26--in .s3-26__title { transition-delay: .18s; }
.s3-26--ready.s3-26--in .s3-26__lead  { transition-delay: .3s; }
.s3-26--ready.s3-26--in .s3-26__card:nth-child(1) { transition-delay: .42s; }
.s3-26--ready.s3-26--in .s3-26__card:nth-child(2) { transition-delay: .51s; }
.s3-26--ready.s3-26--in .s3-26__card:nth-child(3) { transition-delay: .60s; }
.s3-26--ready.s3-26--in .s3-26__card:nth-child(4) { transition-delay: .69s; }

@media (prefers-reduced-motion: reduce) {
    .s3-26--ready .s3-26__panel, .s3-26--ready [data-rv3], .s3-26--ready .s3-26__img { opacity: 1 !important; transform: none !important; transition: none !important; }
    .s3-26__card { transition: none; }
}

/* altura da coluna da foto = altura do painel */
@media (min-width: 768px) {
    .s3-26__media { min-height: 0; height: 100%; align-self: stretch; }
}
.s3-26__cards { max-width: 540px; }

/* vence o ".elementor img { height:auto; max-width:100% }" do Elementor */
.elementor-11664 .s3-26 .s3-26__img { max-width: none; height: 91%; width: auto; border-radius: 0; box-shadow: none; }
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-11664 .s3-26 .s3-26__img { height: auto; width: 118%; }
}
@media (max-width: 767px) {
    .elementor-11664 .s3-26 .s3-26__img { height: auto; width: 100%; max-width: 100%; }
}

/* desktop: a cadeira comeca junto a borda esquerda do painel e a mesa termina
   dissolvida no inicio do conteudo; Isa ocupa ~80% da altura do painel */
@media (min-width: 1025px) {
    .elementor-11664 .s3-26 .s3-26__img {
        height: auto;
        width: 178%;
        left: -56%;
        right: auto;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 99%);
                mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 99%);
    }
}
@media (min-width: 1025px) {
    .elementor-11664 .s3-26 .s3-26__img { width: 172%; left: -54%; }
    .s3-26__content { padding-left: clamp(28px, 2.8vw, 42px); }
}
/* tablet: nunca mais alta que o painel (tablet deitado cortava o topo do cabelo) */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-11664 .s3-26 .s3-26__img {
        width: 118%;
        height: auto;
        max-height: 95%;
        object-fit: contain;
        object-position: left bottom;
    }
}

/* secao antiga do notebook "Imagine acordar sabendo que voce nunca mais vai precisar" (b7ef265): removida em todas as telas */
.elementor-11664 > .elementor-element.elementor-element-b7ef265 { display: none !important; }

/* =====================================================================
   v2 :: copy nova + mini-cards com fio dourado e entrada deslizando
   ===================================================================== */
.s3-26 .s3-26__title { max-width: 15.5em; }

@property --s3a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --s3g { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s3b { syntax: "<number>"; inherits: false; initial-value: .42; }

/* fio dourado: borda desenhada no proprio fundo do card (sem elementos novos) */
.s3-26 .s3-26__card {
    --s3a: 0deg;   /* posicao da luz */
    --s3g: 0;      /* intensidade da luz */
    --s3b: .42;    /* borda base champagne */
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, #fffcf7 0%, #fffaf3 100%) padding-box,
        conic-gradient(from var(--s3a),
            rgba(200, 156, 82, 0) 0deg,
            rgba(200, 156, 82, 0) 300deg,
            rgba(196, 150, 74, calc(var(--s3g) * .55)) 324deg,
            rgba(214, 172, 96, var(--s3g)) 342deg,
            rgba(250, 232, 190, var(--s3g)) 352deg,
            rgba(200, 156, 82, 0) 360deg) border-box,
        linear-gradient(rgba(206, 170, 108, var(--s3b)), rgba(206, 170, 108, var(--s3b))) border-box;
    box-shadow: 0 6px 18px rgba(92, 62, 24, .07), inset 0 0 0 1px rgba(255, 246, 226, .35);
    animation: s3-26-thread 12s cubic-bezier(.45, .1, .4, .9) infinite;
}
/* a luz passa um card de cada vez, de cima para baixo */
.s3-26 .s3-26__card:nth-child(1) { animation-delay: 1s; }
.s3-26 .s3-26__card:nth-child(2) { animation-delay: 2.4s; }
.s3-26 .s3-26__card:nth-child(3) { animation-delay: 3.8s; }
.s3-26 .s3-26__card:nth-child(4) { animation-delay: 5.2s; }
@keyframes s3-26-thread {
    0%   { --s3a: 0deg;   --s3g: 0; }
    5%   { --s3g: .9; }
    27%  { --s3g: .9; }
    32%  { --s3a: 360deg; --s3g: 0; }
    100% { --s3a: 360deg; --s3g: 0; }
}

/* entrada no scroll: cada card desliza da direita (20px) com 100ms de intervalo */
.s3-26--ready .s3-26__card { opacity: 0; transform: translateX(20px); }
.s3-26--ready.s3-26--in .s3-26__card {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.22, .7, .25, 1), transform .6s cubic-bezier(.22, .7, .25, 1), box-shadow .25s ease, --s3b .25s ease;
}
.s3-26--ready.s3-26--in .s3-26__card:nth-child(1) { transition-delay: .42s; }
.s3-26--ready.s3-26--in .s3-26__card:nth-child(2) { transition-delay: .52s; }
.s3-26--ready.s3-26--in .s3-26__card:nth-child(3) { transition-delay: .62s; }
.s3-26--ready.s3-26--in .s3-26__card:nth-child(4) { transition-delay: .72s; }
/* depois da entrada, o hover responde na hora */
.s3-26--done .s3-26__card,
.s3-26.s3-26--ready.s3-26--in.s3-26--done .s3-26__card { transition: transform .25s ease, box-shadow .25s ease, --s3b .25s ease; transition-delay: 0s !important; }

/* hover (desktop) */
@media (hover: hover) and (min-width: 1025px) {
    .s3-26 .s3-26__card:hover,
    .s3-26.s3-26--in .s3-26__card:hover {
        --s3b: .75;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(92, 62, 24, .11), inset 0 0 0 1px rgba(255, 246, 226, .35);
    }
}

/* mobile: entrada um pouco mais curta, de baixo (evita qualquer sobra lateral) */
@media (max-width: 767px) {
    .s3-26--ready .s3-26__card { transform: translateY(14px); }
    .s3-26 .s3-26__card { animation-duration: 11s; }
}

@media (prefers-reduced-motion: reduce) {
    .s3-26 .s3-26__card { animation: none; --s3g: 0; --s3b: .55; }
    .s3-26--ready .s3-26__card { opacity: 1 !important; transform: none !important; transition: none !important; }
}