/* ======================= COLUNA DIREITA (sticky) ======================= */
.col-previsao {
    position: sticky;
    top: 80px
}

/* ======================= CONTROLES (Android/iOS e Claro/Escuro) ======================= */
.controle-os {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, .15);
    padding: 6px;
    border-radius: 999px
}

.controle-os input {
    display: none
}

.controle-os label {
    color: #fff;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none
}

.controle-os input:checked+label {
    background: #000000;
    color: #fff
}

.controle-tema {
    display: flex;
    align-items: center;
    gap: 8px
}

.controles-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin: 0 auto;
}

.switch {
    position: relative;
    width: 48px;
    height: 26px;
    display: inline-block
}

.switch input {
    display: none
}

.alavanca {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .25);
    border-radius: 999px
}

.alavanca::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease
}

.switch input:checked+.alavanca {
    background: #000000
}

.switch input:checked+.alavanca::after {
    transform: translateX(22px)
}

/* ======================= APARELHO (responsivo com aspect-ratio) ======================= */
.telefone-sim {
    width: min(100%, 360px);
    aspect-ratio: 360/740;
    margin-inline: auto;
    perspective: 1200px;
    position: relative;
    display: grid;
    place-items: center
}

.telefone-sim::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -18px;
    height: 28px;
    z-index: 0;
    background: radial-gradient(60% 100% at 50% 0%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%);
    filter: blur(6px)
}

.telefone-sim .moldura {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 11px;
    overflow: hidden;
    background: #0a0f15;
    box-shadow: 0 30px 60px rgba(2, 6, 23, .45);
    transform-origin: center;
    transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .35s
}

.telefone-sim .moldura::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 6px;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .50))
}

.telefone-sim .moldura::after {
    content: "";
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 10px;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
    mix-blend-mode: screen;
    pointer-events: none
}

/* Botões laterais (Android) */
.side-button {
    position: absolute;
    width: 4px;
    border-radius: 3px;
    z-index: 6;
    background: linear-gradient(90deg, #0a0d12, #2b3440 50%, #0a0d12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04)
}

.side-vol1 {
    left: -3px;
    top: 170px;
    height: 44px
}

.side-vol2 {
    left: -3px;
    top: 220px;
    height: 30px
}

.side-power {
    right: -4px;
    top: 190px;
    height: 56px
}

/* === Notch exclusiva para Android === */
.telefone-sim[data-os="android"] .notch-android {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 5px;
    border-radius: 999px;
    z-index: 8;
    background: linear-gradient(180deg, rgb(0 0 0 / 98%), rgba(7, 10, 14, .6));
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Câmera/sensor dentro da notch Android */
.telefone-sim[data-os="android"] .notch-android .cam {
    margin-top: 26px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: 22px;
    background:
        radial-gradient(circle at 35% 35%, #5cc7ff 0 25%, transparent 26 100%),
        radial-gradient(circle at 50% 50%, #0a0f14 0 55%, #05080c 56 100%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 54%), inset 0 0 6px rgba(0, 0, 0, .6);
}

/* ======================= TELA ======================= */
.tela {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: 12px;
    border-radius: 7px;
    overflow: hidden;
    color: #eaf6ff;
    background: #121418;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), inset 0 10px 30px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column
}


.telefone-sim[data-tema="claro"] .tela {
    background: #f8fbff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, .1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02), inset 0 10px 30px rgba(0, 0, 0, .06)
}

/* STATUS BAR */
.status-bar {
    position: absolute;
    left: 22px;
    right: 20px;
    top: 15px;
    height: 22px;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 15px;
    color: rgba(226, 232, 240, .95)
}

.telefone-sim[data-tema="claro"] .status-bar {
    color: #0f172a
}

.status-bar .lado-esq,
.status-bar .lado-dir {
    display: flex;
    gap: 10px;
    align-items: center
}

.status-bar .lado-centro {
    display: none
}

.status-bar .ico {
    width: 22px;
    height: 22px;
    color: currentColor
}

.status-bar .bateria {
    width: 30px
}

.status-bar .nivel {
    opacity: .9
}

/* ======================= CONTEÚDO (perfil) ======================= */
/* Banner (Android) */
.banner {
    position: relative;
    height: 210px;
    margin: 0;
    background: linear-gradient(135deg, #e7f2ff, #ffffff)
}

.telefone-sim[data-tema="escuro"] .banner {
    background: linear-gradient(135deg, #0b1220, #07101a)
}

.banner-img {
    margin-top: 80px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 140px;
    object-fit: contain;
    display: block;
    transform-origin: top;
    transition: transform .25s ease
}

.banner-img[hidden] {
    display: none
}

.banner-fake {
    background: #e7e7e7;
    margin-top: 80px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 7px;
    color: #000000cc;
    font-weight: 800
}

.telefone-sim[data-tema="escuro"] .banner-fake {
    background: #1e293b;
    color: #ffffffcc
}

.banner-toptext {
    position: absolute;
    top: 29px;
    left: 3px;
    right: 15px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 2;
    background: transparent
}

.banner-toptext .ico-seta {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    color: currentColor
}

.banner-toptext .titulo {
    font-size: 20px;
    font-weight: 100;
    letter-spacing: .2px;
    line-height: 1;
    color: inherit;

}

.telefone-sim[data-tema="claro"] .banner-toptext {
    color: #0f172a
}

.telefone-sim[data-tema="escuro"] .banner-toptext {
    color: #ffffff
}


.banner .banner-fake,
.banner .banner-img,
.banner .avatar {
    pointer-events: none;
}


.banner .ico-seta {
    pointer-events: auto;
    cursor: pointer;
}


.banner .banner-toptext {
    z-index: 2;
}

.telefone-sim .avatar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -46px;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    object-fit: contain;
    box-shadow: 0 8px 20px rgba(2, 6, 23, .25);
    background: #111;
    z-index: 2
}

.telefone-sim[data-tema="claro"] .avatar {
    border-color: #fff
}

.telefone-sim[data-tema="escuro"] .avatar {
    border-color: rgba(255, 255, 255, .9)
}

.avatar[hidden] {
    display: none
}

@media (max-width:380px) {
    .telefone-sim .avatar {
        width: 80px;
        height: 80px;
        bottom: -40px
    }
}

/* Cabeçalho + descrição (Android) */
.cabeca {
    padding: 52px 18px 10px
}

.cabeca h4 {
    text-align: center;
    margin: 0 0 6px;
    font-size: 1.06rem
}

.cabeca p {
    margin: 0;
    font-size: .8rem;
    opacity: .95;
    text-align: center
}

.cabeca[hidden] {
    display: none !important
}

/* Ações rápidas */
.acoes-icones {
    margin-left: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 52px;
    padding: 15px 24px 15px
}

.acao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap
}

.acao .ico-ac {
    width: 22px;
    height: 22px;
    color: currentColor
}

.acao span {
    font-size: 14px;
    line-height: 1
}

.telefone-sim[data-tema="claro"] .acoes-icones .acao {
    color: #0e0e0e
}

.telefone-sim[data-tema="escuro"] .acoes-icones .acao {
    color: #60a5fa
}

.acao:hover {
    opacity: 1;
    transform: translateY(-1px)
}

/* Abas */
.abas {}

.aba {
    margin: 10px 0;
    position: relative;
    display: inline-block;
    line-height: 1.1;
    opacity: .65;
    text-decoration: none;
    text-indent: 0;
    cursor: pointer;
}

.aba-infos {
    text-indent: 35px
}

.aba-opcoes {
    text-indent: 105px
}

.aba.ativa {
    opacity: 1
}

.aba.ativa::after {
    content: "";
    position: absolute;
    bottom: -6px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    opacity: .95
}

.aba-infos.ativa::after {
    left: 3px;
    width: 160px
}

.aba-opcoes.ativa::after {
    right: -48px;
    width: 166px
}

.telefone-sim[data-tema="claro"] .abas .aba {
    color: #0f172a
}

.telefone-sim[data-tema="escuro"] .abas .aba {
    color: #e2e8f0
}

@media (max-width:360px) {
    .aba-infos.ativa::after {
        width: 110px
    }

    .aba-opcoes.ativa::after {
        width: 95px
    }
}

/* Lista de informações */
.lista-info {
    list-style: none;
    margin: 0;
    padding: 2px 0 12px
}

.lista-info li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    position: relative
}

.lista-info li svg {
    width: 40px;
    height: 25px;
    opacity: .95
}

.lista-info li div small {
    display: block;
    opacity: .7;
    font-size: .78rem;
    margin-top: 2px
}

.lista-info li[hidden] {
    display: none !important
}

.lista-info li+li::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(30px + 25px + 12px);
    right: 0;
    height: 2px;
    background: var(--divider, rgba(226, 232, 240, .12))
}

.telefone-sim[data-tema="claro"] .lista-info li+li::before {
    --divider: rgba(15, 23, 42, .12)
}

.telefone-sim[data-tema="escuro"] .lista-info li+li::before {
    --divider: rgba(226, 232, 240, .12)
}

/* painéis alternáveis */
.painel {}

.painel[hidden] {
    display: none !important
}

/* bloco “Opções” (Android) */
.op-titulo {
    padding: 10px 18px 8px;
    font-weight: 700;
    opacity: .95
}

.op-legenda {
    padding: 6px 18px;
    font-size: .75rem;
    opacity: .6
}

.op-lista {
    list-style: none;
    margin: 0;
    padding: 0
}

.op-item {
    padding: 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.telefone-sim[data-tema="claro"] .op-item {
    border-color: rgba(15, 23, 42, .12)
}

.opt-politica[hidden],
.opt-termos[hidden] {
    display: none !important
}

/* ========= Barra de navegação Android ========= */
.telefone-sim[data-os="ios"] .nav-android {
    display: none
}

/* segurança, mas iOS ainda será adicionado depois */
.telefone-sim[data-os="android"] .tela {
    padding-bottom: 56px
}

.nav-android {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -57px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: #fff;
    border-top: 1px solid rgba(255, 255, 255, .08);
    z-index: 20;
    user-select: none;
    pointer-events: none
}

.telefone-sim[data-tema="claro"] .nav-android {
    background: transparent;
    border-top-color: rgba(15, 23, 42, .18)
}

.telefone-sim[data-tema="claro"] .nav-android .nav-btn {
    color: #656566;
    opacity: .9
}

.telefone-sim[data-tema="escuro"] .nav-android {
    background: transparent;
    border-top-color: rgba(226, 232, 240, .18)
}

.telefone-sim[data-tema="escuro"] .nav-android .nav-btn {
    color: #aebbd1;
    opacity: .9
}

.nav-android .nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 100%
}

.nav-android svg {
    width: 24px;
    height: 24px
}

.nav-android .home-circ {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px currentColor;
    display: inline-block
}

.nav-android .recentes .barra {
    display: inline-block;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: currentColor;
    margin: 0 2px
}

.nav-android .nav-btn:hover {
    opacity: 1
}


.telefone-sim[data-os="ios"] .android-mensagens {
    display: none !important;
}

/* tela 2 não aparece no iOS */

/* ======================= RESPONSIVO ======================= */
@media (max-width:992px) {
    .col-previsao {
        position: static
    }
}

@media (max-width:380px) {
    .telefone-sim {
        width: 100%
    }
}





/* ======================= iOS: ativação e estrutura ======================= */
.telefone-sim[data-os="ios"] .android-page {
    display: none
}

.telefone-sim[data-os="android"] .ios-page {
    display: none
}

/* status-bar central no iOS */
.telefone-sim[data-os="ios"] .status-bar .lado-esq {
    visibility: hidden
}

.telefone-sim[data-os="ios"] .status-bar .lado-centro {
    display: flex;
    position: absolute;
    left: 9%;
    transform: translateX(-50%);
    font-weight: 600;
}

/* === Dynamic Island (iOS) — realista === */
:root {
    --notch-w: 109px;
    --notch-h: 23px;
    --notch-r: 20px;
}

.telefone-sim[data-os="ios"] .notch-ios {
    display: block;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--notch-w);
    height: var(--notch-h);
    border-radius: var(--notch-r);
    background: linear-gradient(180deg, #0b0f14 0%, #000 100%);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, .45),
        inset 0 1px 2px rgba(255, 255, 255, .06),
        inset 0 -1px 3px rgba(0, 0, 0, .35);

    z-index: 9;
}

.telefone-sim[data-os="ios"] .notch-ios::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--notch-r);
    border: 1px solid rgba(255, 255, 255, .08);
    pointer-events: none;
}

.telefone-sim[data-os="ios"] .notch-ios::before {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 40%, rgba(140, 170, 255, .55) 0 35%, transparent 36%),
        radial-gradient(circle at center, rgba(20, 30, 60, .9) 0 60%, rgba(0, 0, 0, .95) 61%);
    box-shadow:
        inset 0 0 4px rgba(0, 0, 0, .7),
        0 0 4px rgba(60, 120, 255, .25);
}

/* responsivo: ajusta levemente em telas menores do mock */
@media (max-width: 380px) {
    .telefone-sim[data-os="ios"] .notch-ios {
        width: clamp(96px, 32vw, 112px);
        height: clamp(26px, 9vw, 32px);
        border-radius: 999px;
    }
}

/* a página iOS dentro da tela */
.telefone-sim .ios-page {
    padding: 30px 18px 24px
}

/* ======================= Paleta iOS (claro/escuro) ======================= */
:root {
    /* iOS básicos */
    --ios-text-light: #0b0f14;
    --ios-text-dark: #fff;
    --ios-muted-light: #6b7280;
    --ios-muted-dark: #c9ced6;
    --ios-div-light: #000;
    --ios-div-dark: #fff;
    --ios-accent-light: #34c759;
    --ios-accent-dark: #30d158;
    --ios-knob: #fff;

    /* Wallpaper (mude só aqui as cores) */
    /* LIGHT */
    --wall-1-light: rgba(78, 156, 255, .28);
    /* azul */
    --wall-2-light: rgba(255, 120, 200, .22);
    /* rosa */
    --wall-3-light: rgba(120, 255, 210, .18);
    /* verde água */
    --wall-base-top-light: rgba(255, 255, 255, .88);
    --wall-base-bottom-light: rgba(255, 255, 255, .65);
    /* DARK */
    --wall-1-dark: rgba(38, 112, 255, .25);
    --wall-2-dark: rgba(255, 90, 160, .18);
    --wall-3-dark: rgba(48, 220, 180, .14);
    --wall-base-1-dark: #0d1117;
    --wall-base-2-dark: #0b0f14;

    /* Vidro (facilita ajuste global) */
    --glass-blur: 16px;
    --glass-sat: 140%;
    --glass-light: rgba(235, 235, 245, .55);
    --glass-light-bd: rgba(0, 0, 0, .06);
    --glass-dark: rgba(44, 44, 46, .45);
    --glass-dark-bd: rgba(255, 255, 255, .10);
}


.telefone-sim[data-os="ios"] .tela::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 70% at 15% 15%, var(--wall-1-light), transparent 60%),
        radial-gradient(120% 80% at 85% 35%, var(--wall-2-light), transparent 62%),
        radial-gradient(90% 70% at 50% 95%, var(--wall-3-light), transparent 60%),
        linear-gradient(180deg, var(--wall-base-top-light), var(--wall-base-bottom-light));
    filter: saturate(120%);
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .tela::before {
    background:
        radial-gradient(120% 70% at 15% 15%, var(--wall-1-dark), transparent 60%),
        radial-gradient(120% 80% at 85% 35%, var(--wall-2-dark), transparent 62%),
        radial-gradient(90% 70% at 50% 95%, var(--wall-3-dark), transparent 60%),
        linear-gradient(180deg, var(--wall-base-1-dark), var(--wall-base-2-dark) 55%, var(--wall-base-2-dark) 100%);
}


/* tema claro */
.telefone-sim[data-os="ios"][data-tema="claro"] .ios-page {
    color: var(--ios-text-light)
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-card {
    background: var(--ios-card-light)
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-divider {
    background: var(--ios-div-light);
    opacity: .16
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-link {
    color: #007aff
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-subtitle {
    color: var(--ios-muted-light)
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-switch i {
    background: #a1a1a7
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-switch i:before {
    background: var(--ios-knob)
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-switch input:checked+i {
    background: var(--ios-accent-light)
}

/* tema escuro */
.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-page {
    color: var(--ios-text-dark)
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-card {
    background: var(--ios-card-dark)
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-divider {
    background: var(--ios-div-dark);
    opacity: .18
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-link {
    color: #0a84ff
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-subtitle {
    color: var(--ios-muted-dark)
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-switch i {
    background: #2c2c2e
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-switch i:before {
    background: var(--ios-knob)
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-switch input:checked+i {
    background: var(--ios-accent-dark)
}

/* ======================= Topo iOS (seta + hero) ======================= */

.telefone-sim[data-os="ios"] .ios-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 10;
    transition: background .2s ease;
}

.telefone-sim[data-os="ios"] .ios-back {
    position: absolute;
    top: 33px;
    left: 6px;
}


.telefone-sim[data-os="ios"][data-tema="claro"] .ios-back {
    background: rgba(240, 240, 240, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, .1);
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-back {
    background: rgba(30, 30, 30, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .08);
}

.telefone-sim[data-os="ios"] .ios-back svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-back svg {
    color: #0b0f14;
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-back svg {
    color: #fff;
}

.ios-hero-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px
}

.ios-appicon {
    width: 84px;
    height: 84px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25)
}

.ios-title {
    font-size: 28px;
    line-height: 1.1;
    margin: 0;
    font-weight: 700
}

.ios-subtitle {
    font-size: 14px;
    margin-top: -2px;
    opacity: .8
}

/* ======================= Cartões e switches ======================= */
.ios-card {
    border-radius: 16px;
    padding: 4px 9px
}

.ios-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px
}

.ios-divider {
    height: 1px
}

.ios-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px
}

.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.ios-switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    transition: .25s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
}

.ios-switch i:before {
    content: "";
    position: absolute;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: .25s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3)
}

.ios-switch input:checked+i:before {
    transform: translateX(22px)
}

/* ======================= Seções e links ======================= */
.ios-section {
    font-size: 15px;
    letter-spacing: .2px;
    margin: 14px 2px 8px;
    font-weight: 600;
    opacity: .9
}

.ios-about p {
    margin: 0;
    line-height: 1.45
}

.ios-detail-item {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.ios-detail-label {
    font-size: 13px;
    color: var(--ios-muted-dark);
    /* cinza */
    margin-bottom: 2px;
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-detail-label {
    color: var(--ios-muted-light);
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-detail-label {
    color: var(--ios-muted-dark);
}

.ios-link {
    font-size: 15px;
    color: #0a84ff;
    /* azul padrão iOS */
    cursor: default;
}


.ios-link {
    padding: 0px 5px;
    text-decoration: none;
    word-break: break-word
}

/* ======================= Ajustes finos p/ “cara de iPhone” ======================= */
.telefone-sim[data-os="ios"] .tela {
    padding-top: 4px;
    border-radius: 26px
}

.telefone-sim[data-os="ios"] .moldura {
    border-radius: 34px
}

.telefone-sim[data-os="ios"] .status-bar {
    padding: 6px 8px 0
}

/* Se iOS estiver ativo, força exibir a página iOS mesmo que tenha [hidden] */
.telefone-sim[data-os="ios"] .ios-page[hidden] {
    display: block !important
}

/* E esconde a Android-page quando iOS estiver ativo (mesmo sem JS) */
.telefone-sim[data-os="ios"] .android-page {
    display: none !important
}

/* ======================= Ajuste dos CARDS ======================= */
.telefone-sim[data-os="ios"][data-tema="claro"] .ios-card {
    background: var(--glass-light);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-light-bd);
    color: var(--ios-text-light);
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-card {
    background: var(--glass-dark);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-dark-bd);
    color: var(--ios-text-dark);
}

/* ======================= Ajuste de TÍTULOS e SUBTÍTULOS ======================= */
.telefone-sim[data-os="ios"][data-tema="claro"] .ios-title {
    color: var(--ios-text-light);
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-title {
    color: var(--ios-text-dark);
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-subtitle {
    color: var(--ios-muted-light);
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-subtitle {
    color: var(--ios-muted-dark);
}

/* ======================= Ajuste de LINKS ======================= */
.telefone-sim[data-os="ios"][data-tema="claro"] .ios-link {
    color: #007aff;
    /* azul iOS claro */
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-link {
    color: #0a84ff;
    /* azul iOS escuro */
}

/* ======================= Ajuste dos DIVISORES ======================= */
.telefone-sim[data-os="ios"][data-tema="claro"] .ios-divider {
    background: var(--ios-div-light);
    opacity: .08;
}

.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-divider {
    background: var(--ios-div-dark);
    opacity: .12;
}




.telefone-sim[data-os="ios"] .ios-hero-header {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* avatar (app icon): fundo neutro para não “sumir” no gradiente */
.telefone-sim[data-os="ios"] .ios-appicon {
    background: #0b0f14;
    /* base escura */
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-appicon {
    background: #f2f4f7 ;
}

/* título com contraste reforçado */
.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-title {
    color: var(--ios-text-dark);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-title {
    color: var(--ios-text-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* “Verificado por Vivo” mais legível */
.telefone-sim[data-os="ios"][data-tema="escuro"] .ios-subtitle {
    color: rgba(255, 255, 255, .88);
}

.telefone-sim[data-os="ios"][data-tema="claro"] .ios-subtitle {
    color: rgba(11, 15, 20, .72);
}

/* distância do primeiro card para não “comer” o header */
.telefone-sim[data-os="ios"] .ios-hero-header {
    margin-bottom: 16px;
}

/* Traço superior estilo iOS */
.telefone-sim[data-os="ios"] .ios-top-handle {
    position: absolute;
    top: 23px;
    left: 49%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: rgb(255 255 255 / 14%);
    z-index: 10;
}

/* No tema claro, traço mais escuro */
.telefone-sim[data-os="ios"][data-tema="claro"] .ios-top-handle {
    background: rgba(90, 90, 90, 0.28);
}

/* === Home Indicator (traço inferior do iPhone) === */
.telefone-sim[data-os="ios"] .ios-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    z-index: 30;
}


.telefone-sim[data-os="ios"][data-tema="claro"] .ios-home-indicator {
    background: rgba(0, 0, 0, .28);
}




@media (max-width: 450px) {
    .telefone-sim {
        aspect-ratio: 360 / 740;

        /* largura final = menor entre (98vw, 360px, largura que cabe pela ALTURA) */
        width: min(98vw,
                360px,
                calc((100dvh - (max(12px, env(safe-area-inset-top)) + max(12px, env(safe-area-inset-bottom))) - 12px) * (360 / 740)));
        height: auto;
        margin: 12px 10px auto;
        justify-self: center;
        align-self: center;
    }

    .telefone-sim::after {
        display: none;
    }

    .telefone-sim .moldura .tela {
        inset: 10px;
    }

    .tela,
    .tela>* {
        min-height: 0;
    }

    .tela .conteudo,
    .tela .mensagens,
    .tela .scroll-area {
        overflow: auto;
        min-height: 0;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 450px) {
        .telefone-sim {
            width: min(98vw,
                    360px,
                    calc((100vh - (max(12px, env(safe-area-inset-top)) + max(12px, env(safe-area-inset-bottom))) - 12px) * (360 / 740)));
        }
    }
}