/* =====================================================================
   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;
    }
}