/* ==============================================================
 *  CARDIO ASSIST — TEMA CLARO (compartilhado por todas as páginas)
 *
 *  O tema escuro é o CSS de sempre e não depende deste arquivo: toda
 *  regra daqui começa com html[data-theme="light"], exceto o
 *  interruptor e o par de logos, que só existem para o tema claro.
 *
 *  Como funciona:
 *  - O script inline do <head> (src/partials/theme-head.html) põe
 *    data-theme no <html> antes do CSS; o theme.js cuida da troca.
 *  - As classes de cor do Tailwind usadas no HTML (text-white,
 *    bg-black/40, border-white/10...) são remapeadas aqui por
 *    variáveis --u-*. Assim o HTML não muda e os cards montados por
 *    JS e pelos geradores do blog/equipe já nascem certos.
 *  - "Ilhas escuras" (.theme-dark-island, texto sobre foto) e as
 *    superfícies escuras por natureza (.shiny-cta, .btn-pill,
 *    .bg-brand-primary) devolvem as variáveis aos valores do escuro,
 *    então o que está dentro delas continua igual ao tema escuro.
 *  - Regras de seções específicas ficam no CSS de cada página:
 *    home.css (home), site.css (portal/blog) e no <style> do
 *    template da equipe, todas no bloco "TEMA CLARO".
 *
 *  Este arquivo vai inline na home (build:pages) e no CSS crítico do
 *  blog/equipe (critical-css.js); as demais páginas usam <link>.
 * ============================================================== */

/* ----------------------------------------------------------------
 * 1. Interruptor e par de logos (oculto até o <html> ganhar
 *    data-theme-switchable: na prévia agora, para todos no lançamento)
 * ---------------------------------------------------------------- */
.theme-toggle {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html[data-theme-switchable] .theme-toggle { display: inline-flex; }

.theme-toggle__track {
    position: relative;
    display: block;
    width: 2.875rem;
    height: 1.625rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-sizing: border-box;
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.25s ease;
}
.theme-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #AE0006;
    box-shadow: 0 0 10px rgba(174, 0, 6, 0.55);
    transform: translateX(1.25rem);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease, box-shadow 0.35s ease;
}
.theme-toggle__icon {
    position: absolute;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -0.375rem;
    pointer-events: none;
    transition: color 0.35s ease, opacity 0.35s ease;
}
.theme-toggle__icon--sun { left: 6px; color: rgba(255, 255, 255, 0.45); }
.theme-toggle__icon--moon { right: 6px; color: #ffffff; }
.theme-toggle:hover .theme-toggle__track { border-color: rgba(255, 255, 255, 0.28); }
/* O site zera o outline de botões em foco; o anel vai no trilho. */
.theme-toggle:focus-visible .theme-toggle__track { box-shadow: 0 0 0 2px #AE0006; }

html[data-theme="light"] .theme-toggle__track {
    background: rgba(16, 16, 16, 0.06);
    border-color: rgba(16, 16, 16, 0.16);
}
html[data-theme="light"] .theme-toggle:hover .theme-toggle__track { border-color: rgba(16, 16, 16, 0.32); }
html[data-theme="light"] .theme-toggle__thumb {
    background: #101010;
    box-shadow: 0 1px 4px rgba(16, 16, 16, 0.3);
    transform: translateX(0);
}
html[data-theme="light"] .theme-toggle__icon--sun { color: #EFEDE8; }
html[data-theme="light"] .theme-toggle__icon--moon { color: #6B6862; }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle__track,
    .theme-toggle__thumb,
    .theme-toggle__icon { transition: none; }
}

/* Durante a troca (View Transition), cada interruptor vira uma camada própria,
   sem a imagem antiga e sem esmaecer: só a transição CSS da bolinha anima.
   Os nomes precisam ser únicos na página: um interruptor no topo, um no rodapé. */
html.ca-theme-vt .ca-nav-actions .theme-toggle { view-transition-name: ca-toggle-top; }
html.ca-theme-vt .ca-footer .theme-toggle { view-transition-name: ca-toggle-bottom; }
::view-transition-old(ca-toggle-top),
::view-transition-old(ca-toggle-bottom) { display: none; }
::view-transition-group(ca-toggle-top),
::view-transition-group(ca-toggle-bottom),
::view-transition-new(ca-toggle-top),
::view-transition-new(ca-toggle-bottom) { animation: none; }

/* !important: componentes como .tm-logo declaram display depois deste arquivo */
.logo-for-light { display: none !important; }
html[data-theme="light"] .logo-for-dark { display: none !important; }
html[data-theme="light"] .logo-for-light { display: block !important; }

/* ----------------------------------------------------------------
 * 2. Tokens do tema claro (paleta do template Sable)
 * ---------------------------------------------------------------- */
html[data-theme="light"] {
    color-scheme: light;

    --ca-bg: #EFEDE8;          /* bone: fundo da página */
    --ca-bg-alt: #DCD9D3;      /* pedra: dobras alternadas e rodapé */
    --ca-surface: #E4E1DC;     /* areia: cards sobre pedra */
    --ca-raised: #F6F4F0;      /* cards e painéis sobre bone */
    --ca-ink: #101010;         /* títulos */
    --ca-text: #2E2E2E;        /* corpo */
    --ca-text-2: #4A4741;      /* secundário (7,9:1 no bone) */
    --ca-text-3: #5A574F;      /* mínimo para texto pequeno (6,2:1) */
    --ca-line: rgba(16, 16, 16, 0.14);
    --ca-line-soft: rgba(16, 16, 16, 0.08);
    --ca-brand: #AE0006;       /* 6,4:1 no bone */
    --ca-btn: #101010;
    --ca-btn-hover: #2E2E2E;
    --ca-shadow: 0 18px 40px -24px rgba(16, 16, 16, 0.28);

    /* Classes de cor do Tailwind, remapeadas (ver seção 4) */
    --u-text-white: #101010;
    --u-text-white-90: rgba(16, 16, 16, 0.9);
    --u-text-white-80: rgba(16, 16, 16, 0.8);
    --u-text-white-70: rgba(16, 16, 16, 0.72);
    --u-text-white-60: rgba(16, 16, 16, 0.62);
    --u-text-white-20: rgba(16, 16, 16, 0.24);
    --u-zinc-100: #1D1C1A;
    --u-zinc-200: #262523;
    --u-zinc-300: #3A3835;
    --u-zinc-400: #4A4741;
    --u-zinc-500: #5A574F;
    --u-zinc-600: #6B6862;
    --u-zinc-700: #8A8781;
    --u-gray-300: #3A3835;
    --u-brand-grey: #4A4741;

    --u-bg-black: #EFEDE8;
    --u-bg-black-20: rgba(255, 255, 255, 0.35);
    --u-bg-black-40: rgba(255, 255, 255, 0.55);
    --u-bg-black-45: rgba(255, 255, 255, 0.3);
    --u-bg-black-50: rgba(255, 255, 255, 0.6);
    --u-bg-black-60: rgba(255, 255, 255, 0.72);
    --u-bg-black-60-hover: rgba(255, 255, 255, 0.85);
    --u-bg-black-80: rgba(255, 255, 255, 0.85);
    --u-bg-black-90: rgba(239, 237, 232, 0.88);
    --u-bg-050505: #F6F4F0;
    --u-bg-050505-85: rgba(246, 244, 240, 0.85);
    --u-bg-050505-90: rgba(246, 244, 240, 0.9);
    --u-bg-080808-85: rgba(255, 255, 255, 0.75);
    --u-bg-white-001: rgba(255, 255, 255, 0.3);
    --u-bg-white-002: rgba(255, 255, 255, 0.5);
    --u-bg-white-004: rgba(16, 16, 16, 0.04);
    --u-bg-white-5: rgba(16, 16, 16, 0.05);
    --u-bg-white-10: rgba(16, 16, 16, 0.06);
    --u-bg-white-20: rgba(16, 16, 16, 0.1);
    --u-bg-white-001-hover: rgba(16, 16, 16, 0.025);

    --u-border-white-5: rgba(16, 16, 16, 0.08);
    --u-border-white-10: rgba(16, 16, 16, 0.12);
    --u-border-white-20: rgba(16, 16, 16, 0.16);
    --u-border-white-20-hover: rgba(16, 16, 16, 0.22);
    --u-border-white-30: rgba(16, 16, 16, 0.26);

    --u-grad-black: transparent;
    --u-grad-black-30: transparent;
    --u-grad-050505: transparent;
    --u-decoration-white: #101010;
    --u-ds-heading-80: drop-shadow(0 0 0 transparent);
    --u-ds-heading-60: drop-shadow(0 0 0 transparent);
}

/* Ilhas escuras: as variáveis voltam aos valores do tema escuro. */
html[data-theme="light"] *:is(.theme-dark-island, .shiny-cta, .btn-pill, .bg-brand-primary) {
    color-scheme: dark;
    --u-text-white: #ffffff;
    --u-text-white-90: rgba(255, 255, 255, 0.9);
    --u-text-white-80: rgba(255, 255, 255, 0.8);
    --u-text-white-70: rgba(255, 255, 255, 0.7);
    --u-text-white-60: rgba(255, 255, 255, 0.6);
    --u-text-white-20: rgba(255, 255, 255, 0.2);
    --u-zinc-100: #f4f4f5;
    --u-zinc-200: #e4e4e7;
    --u-zinc-300: #d4d4d8;
    --u-zinc-400: #a1a1aa;
    --u-zinc-500: #71717a;
    --u-zinc-600: #52525b;
    --u-zinc-700: #3f3f46;
    --u-gray-300: #d1d5db;
    --u-brand-grey: #686868;

    --u-bg-black: #000000;
    --u-bg-black-20: rgba(0, 0, 0, 0.2);
    --u-bg-black-40: rgba(0, 0, 0, 0.4);
    --u-bg-black-45: rgba(0, 0, 0, 0.45);
    --u-bg-black-50: rgba(0, 0, 0, 0.5);
    --u-bg-black-60: rgba(0, 0, 0, 0.6);
    --u-bg-black-60-hover: rgba(0, 0, 0, 0.6);
    --u-bg-black-80: rgba(0, 0, 0, 0.8);
    --u-bg-black-90: rgba(0, 0, 0, 0.9);
    --u-bg-050505: #050505;
    --u-bg-050505-85: rgba(5, 5, 5, 0.85);
    --u-bg-050505-90: rgba(5, 5, 5, 0.9);
    --u-bg-080808-85: rgba(8, 8, 8, 0.85);
    --u-bg-white-001: rgba(255, 255, 255, 0.01);
    --u-bg-white-002: rgba(255, 255, 255, 0.02);
    --u-bg-white-004: rgba(255, 255, 255, 0.04);
    --u-bg-white-5: rgba(255, 255, 255, 0.05);
    --u-bg-white-10: rgba(255, 255, 255, 0.1);
    --u-bg-white-20: rgba(255, 255, 255, 0.2);
    --u-bg-white-001-hover: rgba(255, 255, 255, 0.01);

    --u-border-white-5: rgba(255, 255, 255, 0.05);
    --u-border-white-10: rgba(255, 255, 255, 0.1);
    --u-border-white-20: rgba(255, 255, 255, 0.2);
    --u-border-white-20-hover: rgba(255, 255, 255, 0.2);
    --u-border-white-30: rgba(255, 255, 255, 0.3);

    --u-grad-black: #000000;
    --u-grad-black-30: rgba(0, 0, 0, 0.3);
    --u-grad-050505: #050505;
    --u-decoration-white: #ffffff;
    --u-ds-heading-80: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
    --u-ds-heading-60: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

/* ----------------------------------------------------------------
 * 3. Base: página, grade ambiente, textura e fundo WebGL
 * ---------------------------------------------------------------- */
html[data-theme="light"] body {
    background-color: var(--ca-bg);
    color: var(--ca-text);
}
html[data-theme="light"] .ambient-grid {
    background-image:
        linear-gradient(to right, rgba(174, 0, 6, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(174, 0, 6, 0.035) 1px, transparent 1px);
}
html[data-theme="light"] .noise-overlay {
    opacity: 0.035;
    mix-blend-mode: multiply;
}
/* O shader do UnicornStudio foi feito para fundo preto: no claro fica
   desligado (unicorn-loader.js nem inicia) e entra um brilho estático. */
html[data-theme="light"] [data-us-project]:not([data-us-project-light]) { display: none !important; }
html[data-theme="light"] .ca-bg-stage {
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(174, 0, 6, 0.07) 0%, transparent 70%),
        radial-gradient(45% 40% at 85% 20%, rgba(174, 0, 6, 0.04) 0%, transparent 75%),
        var(--ca-bg);
}
html[data-theme="light"] .ca-bg-glow { opacity: 0.55; }

/* Seleção de texto */
html[data-theme="light"] *::selection { background: rgba(174, 0, 6, 0.16); color: #101010; }

/* ----------------------------------------------------------------
 * 4. Remapeamento das classes de cor do Tailwind
 * ---------------------------------------------------------------- */
html[data-theme="light"] .text-white,
html[data-theme="light"] [class~="hover:text-white"]:hover,
html[data-theme="light"] .group:hover [class~="group-hover:text-white"] { color: var(--u-text-white); }
html[data-theme="light"] [class~="text-white/90"],
html[data-theme="light"] .group:hover [class~="group-hover:text-white/90"] { color: var(--u-text-white-90); }
html[data-theme="light"] [class~="text-white/80"] { color: var(--u-text-white-80); }
html[data-theme="light"] [class~="text-white/70"] { color: var(--u-text-white-70); }
html[data-theme="light"] [class~="text-white/60"] { color: var(--u-text-white-60); }
html[data-theme="light"] [class~="text-white/20"] { color: var(--u-text-white-20); }
html[data-theme="light"] .text-zinc-100 { color: var(--u-zinc-100); }
html[data-theme="light"] .text-zinc-200 { color: var(--u-zinc-200); }
html[data-theme="light"] .text-zinc-300 { color: var(--u-zinc-300); }
html[data-theme="light"] .text-zinc-400 { color: var(--u-zinc-400); }
html[data-theme="light"] .text-zinc-500 { color: var(--u-zinc-500); }
html[data-theme="light"] .text-zinc-600 { color: var(--u-zinc-600); }
html[data-theme="light"] .text-zinc-700 { color: var(--u-zinc-700); }
html[data-theme="light"] .text-gray-300 { color: var(--u-gray-300); }
html[data-theme="light"] .text-brand-grey { color: var(--u-brand-grey); }
html[data-theme="light"] [class~="placeholder-zinc-600"]::placeholder { color: #7A776F; }
@media (min-width: 768px) {
    html[data-theme="light"] [class~="md:text-zinc-400"] { color: var(--u-zinc-400); }
    html[data-theme="light"] [class~="md:text-gray-300"] { color: var(--u-gray-300); }
}

html[data-theme="light"] .bg-black { background-color: var(--u-bg-black); }
html[data-theme="light"] [class~="bg-black/20"] { background-color: var(--u-bg-black-20); }
html[data-theme="light"] [class~="bg-black/40"] { background-color: var(--u-bg-black-40); }
html[data-theme="light"] [class~="bg-black/45"] { background-color: var(--u-bg-black-45); }
html[data-theme="light"] [class~="bg-black/50"] { background-color: var(--u-bg-black-50); }
html[data-theme="light"] [class~="bg-black/60"] { background-color: var(--u-bg-black-60); }
html[data-theme="light"] [class~="hover:bg-black/60"]:hover { background-color: var(--u-bg-black-60-hover); }
html[data-theme="light"] [class~="bg-black/80"] { background-color: var(--u-bg-black-80); }
html[data-theme="light"] [class~="bg-[rgba(0,0,0,0.90)]"] { background-color: var(--u-bg-black-90); }
html[data-theme="light"] [class~="bg-[#050505]"] { background-color: var(--u-bg-050505); }
html[data-theme="light"] [class~="bg-[#050505]/85"] { background-color: var(--u-bg-050505-85); }
html[data-theme="light"] [class~="bg-[#050505]/90"] { background-color: var(--u-bg-050505-90); }
html[data-theme="light"] [class~="bg-[#080808]/85"] { background-color: var(--u-bg-080808-85); }
html[data-theme="light"] [class~="bg-white/[0.01]"] { background-color: var(--u-bg-white-001); }
html[data-theme="light"] [class~="bg-white/[0.02]"] { background-color: var(--u-bg-white-002); }
html[data-theme="light"] [class~="bg-white/[0.04]"] { background-color: var(--u-bg-white-004); }
html[data-theme="light"] [class~="bg-white/5"] { background-color: var(--u-bg-white-5); }
html[data-theme="light"] [class~="bg-white/10"] { background-color: var(--u-bg-white-10); }
html[data-theme="light"] [class~="hover:bg-white/20"]:hover { background-color: var(--u-bg-white-20); }
html[data-theme="light"] [class~="hover:bg-white/[0.01]"]:hover { background-color: var(--u-bg-white-001-hover); }

html[data-theme="light"] [class~="border-white/5"] { border-color: var(--u-border-white-5); }
html[data-theme="light"] [class~="border-white/10"] { border-color: var(--u-border-white-10); }
html[data-theme="light"] [class~="border-white/20"] { border-color: var(--u-border-white-20); }
html[data-theme="light"] [class~="hover:border-white/20"]:hover { border-color: var(--u-border-white-20-hover); }
html[data-theme="light"] [class~="hover:border-white/30"]:hover { border-color: var(--u-border-white-30); }
html[data-theme="light"] [class~="divide-white/5"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--u-border-white-5); }

html[data-theme="light"] [class~="decoration-white"],
html[data-theme="light"] [class~="hover:decoration-white"]:hover,
html[data-theme="light"] .group:hover [class~="group-hover:decoration-white"] { text-decoration-color: var(--u-decoration-white); }

/* Degradês pretos de transição entre dobras: somem no claro (seguem na ilha) */
html[data-theme="light"] [class~="from-[#000000]"] { --tw-gradient-from: var(--u-grad-black) var(--tw-gradient-from-position); }
html[data-theme="light"] [class~="to-[#000000]"] { --tw-gradient-to: var(--u-grad-black) var(--tw-gradient-to-position); }
html[data-theme="light"] [class~="from-[#050505]"] { --tw-gradient-from: var(--u-grad-050505) var(--tw-gradient-from-position); }
html[data-theme="light"] [class~="via-black/30"] {
    --tw-gradient-stops: var(--tw-gradient-from), var(--u-grad-black-30) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="light"] [class~="via-white/10"] {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(16, 16, 16, 0.12) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* Sombras pensadas para o preto */
html[data-theme="light"] [class~="drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)]"] { --tw-drop-shadow: var(--u-ds-heading-80); }
html[data-theme="light"] [class~="drop-shadow-[0_4px_8px_rgba(0,0,0,0.6)]"] { --tw-drop-shadow: var(--u-ds-heading-60); }
html[data-theme="light"] [class~="shadow-[0_8px_32px_0_rgba(0,0,0,0.5)]"] {
    --tw-shadow: 0 10px 28px -18px rgba(16, 16, 16, 0.28);
    --tw-shadow-colored: 0 10px 28px -18px var(--tw-shadow-color);
}
html[data-theme="light"] [class~="hover:shadow-[0_0_18px_rgba(255,255,255,0.25)]"]:hover {
    --tw-shadow: 0 0 18px rgba(16, 16, 16, 0.14);
}
html[data-theme="light"] [class~="focus-visible:ring-white/60"]:focus-visible { --tw-ring-color: rgba(16, 16, 16, 0.5); }

/* Ícones brancos em imagem (glifos sem cor): viram tinta no claro */
html[data-theme="light"] *:is(img[src*="whatsapp-icon-v3"], img[src*="pills-icon"], img[src*="run-and-dog"], img[src*="cardio-mark-white"]):not(.theme-dark-island *) {
    filter: invert(1);
}

/* ----------------------------------------------------------------
 * 5. Componentes compartilhados
 * ---------------------------------------------------------------- */

/* Botão principal: continua preto, com o feixe vermelho girando. O feixe de 1px
   do escuro some na borda contra o bone: no claro o trilho tem 2px, o fundo que
   aparece nele é vermelho-escuro (anel) e o feixe é mais longo, com a cabeça
   mais clara; o halo vermelho embaixo volta como no escuro. */
html[data-theme="light"] .shiny-cta {
    color: #ffffff;
    background: #2A0708;
    box-shadow: 0 10px 28px -8px rgba(174, 0, 6, 0.5), 0 10px 20px -16px rgba(16, 16, 16, 0.4);
}
html[data-theme="light"] .shiny-cta::before {
    background: conic-gradient(transparent 0%, rgba(174, 0, 6, 0.3) 6%, #AE0006 16%, #FF2A30 24%, #AE0006 30%, transparent 42%, transparent 100%);
}
html[data-theme="light"] .shiny-cta::after { inset: 2px; background: var(--ca-btn); }
/* Hover: o brilho interno do escuro some no bone. Anel vermelho de 2px, brilho
   vermelho forte por fora e por dentro. Só com mouse: no toque o :hover gruda. */
@media (hover: hover) {
    html[data-theme="light"] .shiny-cta:hover {
        box-shadow: 0 0 0 2px #AE0006, 0 14px 32px -10px rgba(174, 0, 6, 0.65), 0 0 28px -6px rgba(174, 0, 6, 0.5);
    }
    html[data-theme="light"] .shiny-cta:hover::after {
        box-shadow: inset 0 0 22px rgba(174, 0, 6, 0.55), inset 0 -10px 18px -10px rgba(174, 0, 6, 0.75);
    }
}
html[data-theme="light"] .shiny-cta:focus-visible,
html[data-theme="light"] .shiny-cta:active {
    box-shadow: 0 0 0 2px #AE0006, 0 14px 32px -10px rgba(174, 0, 6, 0.65), 0 0 28px -6px rgba(174, 0, 6, 0.5);
}
html[data-theme="light"] .shiny-cta:focus-visible::after,
html[data-theme="light"] .shiny-cta:active::after {
    box-shadow: inset 0 0 22px rgba(174, 0, 6, 0.55), inset 0 -10px 18px -10px rgba(174, 0, 6, 0.75);
}

/* Pílulas pretas: a borda de 1px deixava ver o bone (fio claro entre o anel e o preto) */
html[data-theme="light"] .btn-pill--glow,
html[data-theme="light"] .btn-pill--beam {
    background-color: #000000;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}
/* Equipe ("Ver toda a equipe"): hover vermelho, como o shiny-cta */
@media (hover: hover) {
    html[data-theme="light"] .btn-pill--beam:hover {
        box-shadow: 0 0 0 2px #AE0006, 0 14px 32px -10px rgba(174, 0, 6, 0.65), 0 0 28px -6px rgba(174, 0, 6, 0.5);
    }
}
html[data-theme="light"] .btn-pill--beam:focus-visible,
html[data-theme="light"] .btn-pill--beam:active {
    box-shadow: 0 0 0 2px #AE0006, 0 14px 32px -10px rgba(174, 0, 6, 0.65), 0 0 28px -6px rgba(174, 0, 6, 0.5);
}
/* Portal (glow): o brilho branco que percorre a borda só aparece cercado de
   preto. No claro o trilho tem 2px e ganha um contorno preto por fora. */
html[data-theme="light"] .btn-pill--glow {
    box-shadow: 0 0 0 1.5px #000000, 0 14px 26px -14px rgba(16, 16, 16, 0.55);
}
html[data-theme="light"] .btn-pill--glow .btn-pill__surface { inset: 2px; }
/* O brilho vermelho que sobe por dentro do botão da equipe: 0,25 some no claro */
html[data-theme="light"] .btn-pill--beam .btn-pill__beam-glow {
    background: radial-gradient(60% 60% at 50% 100%, rgba(174, 0, 6, 0.6) 0%, transparent 100%);
}

/* Botão secundário (WhatsApp) */
html[data-theme="light"] .ghost-cta:not(.theme-dark-island *) {
    color: var(--ca-text);
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(16, 16, 16, 0.16);
}
html[data-theme="light"] .ghost-cta:not(.theme-dark-island *):hover,
html[data-theme="light"] .ghost-cta:not(.theme-dark-island *):focus-visible {
    color: #0F7A43; /* verde do WhatsApp escurecido: 5,1:1 no claro */
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 122, 67, 0.35);
    box-shadow: 0 10px 30px -12px rgba(15, 122, 67, 0.3);
}

/* Painéis de vidro */
html[data-theme="light"] .glass-panel:not(.theme-dark-island *) {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(16, 16, 16, 0.08);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-left-color: rgba(16, 16, 16, 0.06);
    box-shadow: 0 12px 30px -20px rgba(16, 16, 16, 0.3);
}
html[data-theme="light"] .glass-panel:not(.theme-dark-island *)::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
html[data-theme="light"] .glass-overlay-panel:not(.theme-dark-island *) {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(16, 16, 16, 0.08);
    border-top-color: rgba(255, 255, 255, 0.85);
    border-left-color: rgba(16, 16, 16, 0.06);
    box-shadow: 0 30px 60px -34px rgba(16, 16, 16, 0.32);
}
/* A home troca o vidro por um painel opaco no celular (!important no home.css) */
@media (max-width: 768px) {
    html[data-theme="light"] .glass-overlay-panel:not(.theme-dark-island *) {
        background: rgba(250, 249, 246, 0.94) !important;
    }
}
html[data-theme="light"] .beam-spin-box:not(.theme-dark-island *) {
    background: rgba(255, 255, 255, 0.6);
}
html[data-theme="light"] .beam-spin-box:not(.theme-dark-island *) .beam-spin-box__beam-glow {
    background: radial-gradient(50% 50% at 50% 100%, rgba(174, 0, 6, 0.08) 0%, transparent 100%);
}

/* Manchas vermelhas desfocadas no alto das dobras: no claro viram rosa forte */
html[data-theme="light"] [class~="bg-[#AE0006]/10"][class~="blur-[120px]"] { opacity: 0.4; }

/* Ponto piscante dos selos: o animate-pulse baixa a opacidade, e o vermelho
   a meia opacidade sobre o bone vira rosa claro. No claro o ponto fica cheio,
   com brilho fixo, e uma onda em anel se expande dele. A onda é um ::after
   animado só em transform e opacity (animar box-shadow repinta a cada quadro). */
@keyframes ca-dot-ring {
    0% { transform: scale(1); opacity: 0.65; }
    70%, 100% { transform: scale(3.3); opacity: 0; }
}
html[data-theme="light"] [class~="shadow-[0_0_8px_#AE0006]"].animate-pulse {
    position: relative;
    animation: none;
    box-shadow: 0 0 6px 1px rgba(174, 0, 6, 0.7);
}
html[data-theme="light"] [class~="shadow-[0_0_8px_#AE0006]"].animate-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #AE0006;
    animation: ca-dot-ring 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme="light"] [class~="shadow-[0_0_8px_#AE0006]"].animate-pulse {
        box-shadow: 0 0 0 3px rgba(174, 0, 6, 0.16), 0 0 8px 1px rgba(174, 0, 6, 0.7);
    }
    html[data-theme="light"] [class~="shadow-[0_0_8px_#AE0006]"].animate-pulse::after { content: none; }
}

/* Halo vermelho pulsante dos ícones: vira rosa forte no claro se não for suavizado */
html[data-theme="light"] .animate-glow-red:not(.theme-dark-island *) {
    box-shadow: 0 0 10px rgba(174, 0, 6, 0.22), 0 0 22px rgba(174, 0, 6, 0.1);
}

/* Título em Vonca (hero da home e do portal): tinta em degradê */
html[data-theme="light"] .hero-title {
    background: linear-gradient(180deg, #101010 0%, #4A4741 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
@media (max-width: 768px) {
    html[data-theme="light"] .hero-title {
        background: none !important;
        -webkit-text-fill-color: #101010 !important;
        color: #101010 !important;
        text-shadow: none !important;
    }
}

/* ----------------------------------------------------------------
 * 6. Topo e menu do celular
 * ---------------------------------------------------------------- */
html[data-theme="light"] .ca-nav-bar.glass-panel {
    background: transparent !important;
    border-bottom: 1px solid rgba(16, 16, 16, 0.1);
}
html[data-theme="light"] .ca-nav-bar.glass-panel::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
/* No toque, o :hover gruda na barra ao tocar no interruptor e esse brilho
   (acima dos botões) varre a bolinha logo depois da troca. */
@media (hover: none) {
    html[data-theme="light"] .ca-nav-bar.glass-panel::before { display: none; }
}
html[data-theme="light"] #mobileMenu {
    background: rgba(247, 246, 242, 0.98) !important;
    border-color: rgba(16, 16, 16, 0.12);
    box-shadow: 0 30px 60px -24px rgba(16, 16, 16, 0.35);
}
html[data-theme="light"] #mobileMenu a:not([href$=".html"]):hover { color: var(--ca-brand); }
html[data-theme="light"] #mobileMenu a[href$="portal-do-paciente.html"] {
    background: var(--ca-btn);
    border-color: var(--ca-btn);
    color: #ffffff;
}
html[data-theme="light"] #mobileMenu a[href$="portal-do-paciente.html"]:hover { background: var(--ca-btn-hover); }

/* ----------------------------------------------------------------
 * 7. Rodapé
 * ---------------------------------------------------------------- */
html[data-theme="light"] .ca-footer {
    background-color: var(--ca-bg-alt);
    border-top-color: rgba(16, 16, 16, 0.1);
}
html[data-theme="light"] .ca-footer h2 { opacity: 0.72; }
html[data-theme="light"] .ca-footer .text-brand-greyDark { color: #4A4741; }
html[data-theme="light"] .ca-footer [class~="hover:text-white"]:hover { color: var(--ca-ink); }
html[data-theme="light"] .ca-footer [class~="hover:bg-brand-primary/10"]:hover { color: var(--ca-brand); }

/* ----------------------------------------------------------------
 * 8. Modal legal (Política de Privacidade e Termos de Uso)
 * ---------------------------------------------------------------- */
html[data-theme="light"] .legal-modal-backdrop { background: rgba(220, 217, 211, 0.72); }
html[data-theme="light"] .legal-modal {
    background: #F7F6F2;
    border-color: rgba(16, 16, 16, 0.1);
    box-shadow: 0 30px 70px -24px rgba(16, 16, 16, 0.4);
}
html[data-theme="light"] .legal-modal-header { border-bottom-color: rgba(16, 16, 16, 0.08); }
html[data-theme="light"] .legal-modal-title { color: var(--ca-ink); }
html[data-theme="light"] .legal-modal-close { color: var(--ca-ink); opacity: 0.5; }
html[data-theme="light"] .legal-modal-close:hover { opacity: 1; background: rgba(16, 16, 16, 0.06); }
html[data-theme="light"] .legal-modal-body { color: #3A3835; }
html[data-theme="light"] .legal-modal-body h3,
html[data-theme="light"] .legal-modal-body strong { color: var(--ca-ink); }
html[data-theme="light"] .legal-modal-body::-webkit-scrollbar-track { background: rgba(16, 16, 16, 0.03); }
html[data-theme="light"] .legal-modal-body::-webkit-scrollbar-thumb { background: rgba(16, 16, 16, 0.18); }
html[data-theme="light"] .legal-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(16, 16, 16, 0.3); }