/* ARQUIVO: assets/css/parts/_biomar.css */

/* --- VARIÁVEIS GERAIS --- */
.ch-biomar-scope {
    --cb-black: #000000;
    --cb-white: #ffffff;
    
    /* Variáveis do Card (Modo Claro Padrão) */
    --bio-card-text: #000000;
    --bio-circle-bg: #000000;
    --bio-icon-fill: #ffffff;
    --bio-border-color: #000000;
    --bio-shadow-color: #000000;

    /* Variáveis Dinâmicas (Tape) */
    --cb-tape-bg-dyn: #ff0055;
    --cb-tape-text-dyn: #ffffff;
    --cb-tape-border-dyn: #000000;
    --cb-tape-speed-dyn: 240s; 

    --cb-tape-bg-dyn-dark: #2a0a2e;
    --cb-tape-text-dyn-dark: #ffffff;
    --cb-tape-border-dyn-dark: #ffffff;

    --cb-border: 4px solid var(--cb-black);
    --cb-shadow: 8px 8px 0px 0px var(--cb-black);
    font-family: 'Space Mono', monospace;
}

/* ==========================================================================
   OVERRIDES PARA DARK MODE (FUNDO ESCURO / BORDAS COLORIDAS)
   ========================================================================== */
body.ceclimar-dark-mode .ch-biomar-scope {
    /* Texto Branco */
    --bio-card-text: #ffffff;
    
    /* Fundo da bolinha PRETO */
    --bio-circle-bg: #000000;
    
    /* Ícone BRANCO */
    --bio-icon-fill: #ffffff;
}

/* [LÓGICA DAS 5 CORES NAS BORDAS] */
body.ceclimar-dark-mode .ch-bio-polaroid {
    background: #1a1a1a !important; /* Fundo Escuro */
    border-color: var(--bio-bg) !important;
    box-shadow: 8px 8px 0px 0px var(--bio-bg) !important;
}

/* HOVER NO DARK MODE */
body.ceclimar-dark-mode .ch-bio-polaroid:hover {
    background: #000000 !important; /* Fundo Preto Absoluto */
    border-color: var(--bio-hover) !important;
    box-shadow: 12px 12px 0px 0px var(--bio-hover) !important;
    transform: scale(1.05) rotate(0deg) !important;
}

/* BOLINHA DO ÍCONE (Acompanha a cor da borda) */
body.ceclimar-dark-mode .ch-bio-card-icon-wrapper {
    background-color: #000000 !important; /* Fundo Preto */
    color: #ffffff !important; /* Ícone Branco */
    border-color: var(--bio-bg) !important; 
}

/* BOLINHA NO HOVER */
body.ceclimar-dark-mode .ch-bio-polaroid:hover .ch-bio-card-icon-wrapper {
    border-color: var(--bio-hover) !important;
    color: var(--bio-hover) !important; /* Opcional: Ícone fica colorido no hover */
}

/* TEXTO */
body.ceclimar-dark-mode .ch-bio-card-text {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* --- O RESTANTE DO CSS PERMANECE IGUAL --- */

/* FAIXA TAPE MARQUEE */
.ch-bio-tape-container {
    width: 100%; padding: 40px 0; position: relative; z-index: 20; overflow: hidden;
}
.ch-bio-tape-marquee {
    background: var(--cb-tape-bg-dyn); color: var(--cb-tape-text-dyn);
    border-top: 4px solid var(--cb-tape-border-dyn); border-bottom: 4px solid var(--cb-tape-border-dyn);
    padding: 15px 0; transform: rotate(-1deg) scale(1.05); width: 110%; margin-left: -5%; 
    font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 1.5rem; white-space: nowrap;
    box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}
body.ceclimar-dark-mode .ch-bio-tape-marquee {
    background: var(--cb-tape-bg-dyn-dark); color: var(--cb-tape-text-dyn-dark);
    border-top-color: var(--cb-tape-border-dyn-dark); border-bottom-color: var(--cb-tape-border-dyn-dark);
    box-shadow: 0 10px 10px rgba(255,255,255,0.05);
}

/* --- NAVEGAÇÃO EXTERNA --- */
.ch-bio-nav-section { 
    width: 100%; margin-bottom: 80px; position: relative; z-index: 10;
}
.ch-bio-nav-label {
    background: var(--cb-black); color: var(--cb-white);
    font-family: 'Archivo Black', sans-serif; font-style: italic; font-size: 1.5rem;
    padding: 10px 20px; display: inline-block; margin-bottom: 10px; transform: skewX(-10deg);
}
.ch-bio-nav-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; width: 100%; box-sizing: border-box;
}
.ch-bio-nav-card-wrapper {
    display: flex; flex-direction: column; 
    border: var(--cb-border); background: var(--cb-black); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: auto; position: relative; overflow: hidden;
}
.ch-bio-nav-card-wrapper:hover {
    transform: translate(-4px, -4px); box-shadow: var(--cb-shadow); z-index: 15;
}
.ch-bio-link-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;
    background: transparent !important; border: none !important;
}
.ch-bio-card-img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 5 / 3; object-fit: cover;
    border-bottom: 4px solid var(--cb-black);
    filter: none !important;
}
.ch-bio-card-placeholder {
    width: 100%; aspect-ratio: 5 / 3; background-color: #333;
    border-bottom: 4px solid var(--cb-black);
}
.ch-bio-card-footer {
    padding: 15px 20px; display: flex; align-items: center; justify-content: flex-start; 
    min-height: 70px; color: #000000 !important; 
}
.ch-bio-footer-inner {
    display: flex; align-items: center; gap: 12px; width: 100%;
}
.ch-bio-footer-inner svg {
    width: 24px; height: 24px; min-width: 24px;
    fill: none; stroke: #000000 !important; stroke-width: 3; flex-shrink: 0;
}
.ch-bio-footer-inner span {
    font-family: 'Archivo Black', sans-serif; font-size: 1rem; line-height: 1.2;
    text-transform: uppercase; color: #000000 !important; word-break: break-word;
}

/* --- CARROSSEL POLAROID --- */
.ch-bio-carousel-wrapper {
    position: relative; width: 100%; max-width: 1200px;
    margin: 40px auto; font-family: 'Inter', sans-serif;
}

/* Botões de Navegação */
.ch-bio-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 48px; height: 48px; background: #fff; border: 2px solid #000;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 4px 4px 0px 0px #000; cursor: pointer; transition: all 0.2s ease; color: #000;
}
.ch-bio-nav-btn:hover { background: #f0f0f0; }
.ch-bio-nav-btn:active { transform: translateY(-40%); }
.ch-bio-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: translateY(-50%); }
.ch-bio-nav-btn.prev { left: -20px; }
.ch-bio-nav-btn.next { right: -20px; }

/* Botões Nav Dark Mode */
body.ceclimar-dark-mode .ch-bio-nav-btn {
    background: #1a1a1a;
    border-color: #fff;
    color: #fff;
    box-shadow: 4px 4px 0px 0px #fff;
}
body.ceclimar-dark-mode .ch-bio-nav-btn:hover {
    background: #000;
}

/* Container Scroll */
.ch-bio-carousel-container {
    width: 100%; overflow-x: auto; overflow-y: hidden;
    padding: 40px 20px; 
    -ms-overflow-style: none; scrollbar-width: none; white-space: nowrap;
}
.ch-bio-carousel-container::-webkit-scrollbar { display: none; }

.ch-bio-carousel-track {
    display: inline-flex; gap: 30px; align-items: center;
}

/* ITEM POLAROID (Botão - Estilo Base) */
.ch-bio-polaroid { 
    width: 180px; height: 180px; flex-shrink: 0;
    background: var(--bio-bg, #ffffff); 
    border: 4px solid var(--bio-border-color);
    box-shadow: 8px 8px 0px 0px var(--bio-shadow-color);
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    text-decoration: none !important; 
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    position: relative; 
    padding: 15px; box-sizing: border-box;
}

.ch-bio-polaroid.rotate-left { transform: rotate(-2deg); }
.ch-bio-polaroid.rotate-right { transform: rotate(2deg); }
.ch-bio-polaroid.rotate-none { transform: rotate(0deg); }

.ch-bio-polaroid:hover { 
    background: var(--bio-hover, #ccc) !important; 
    transform: scale(1.1) rotate(0deg) !important; 
    z-index: 5; 
    box-shadow: 12px 12px 0px 0px var(--bio-shadow-color);
}

.ch-bio-card-icon-wrapper { 
    background: var(--bio-circle-bg); 
    color: var(--bio-icon-fill);
    width: 60px; height: 60px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    margin-bottom: 15px; 
    border: 2px solid var(--bio-border-color);
    transition: all 0.3s ease;
}

.ch-polaroid-svg, .ch-polaroid-svg * {
    width: 30px !important; height: 30px !important; display: block !important;
    fill: currentColor; stroke: currentColor; stroke-width: 2px;
    color: inherit !important; vector-effect: non-scaling-stroke;
}
.ch-polaroid-svg[stroke], .ch-polaroid-svg [stroke] { fill: none; }

.ch-bio-card-text { 
    font-family: 'Archivo Black', sans-serif; 
    text-transform: uppercase; font-size: 0.9rem; text-align: center; 
    line-height: 1.1; word-break: break-word; white-space: normal;
    color: var(--bio-card-text) !important;
}

/* --- SISTEMAS --- */
.ch-bio-systems-wrapper { position: relative; padding: 60px 0; overflow: hidden; width: 100%; z-index: 1; }
.ch-bio-systems-bg {
    background: var(--cb-black); transform: skewY(-2deg);
    border-top: 5px solid var(--cb-green); border-bottom: 5px solid var(--cb-green);
    padding: 60px 0 40px 0; width: 100vw; margin-left: calc(-50vw + 50%);
}
.ch-bio-systems-content { transform: skewY(2deg); max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ch-bio-sys-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 50px; }
.ch-sys-btn-wrapper {
    background: var(--cb-white) !important; height: 80px; 
    display: flex; align-items: center; justify-content: center; position: relative; 
    border: 4px solid var(--sys-color, #000) !important; box-shadow: 8px 8px 0 var(--sys-color, #000) !important;
    transition: all 0.2s ease; cursor: pointer;
}
.ch-sys-btn-wrapper:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--sys-color, #000) !important; }
a.ch-bio-btn-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: transparent !important; border: none !important; }
.ch-bio-btn-text { color: #000000 !important; font-family: 'Archivo Black', sans-serif; font-size: 1.4rem; text-transform: uppercase; z-index: 5; pointer-events: none; }
.ch-bio-sys-marquee-box { border-top: 2px solid var(--cb-white); border-bottom: 2px solid var(--cb-white); padding: 15px 0; font-family: 'Space Mono', monospace; font-weight: bold; font-size: 1.1rem; text-transform: uppercase; overflow: hidden; white-space: nowrap; width: 100%; }
.ch-bio-sys-scroll-content { display: inline-block; animation: ch-scroll-left var(--sys-marquee-speed, 25s) linear infinite; }
.ch-bio-scroll-left { display: inline-block; animation: ch-scroll-left var(--cb-tape-speed-dyn) linear infinite; }
@keyframes ch-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@media (max-width: 900px) {
    .ch-bio-nav-grid { grid-template-columns: 1fr; gap: 25px; padding: 0 10px; }
    .ch-bio-systems-bg { transform: skewY(0deg); border-width: 4px; width: 100%; margin-left: 0; margin-top: 30px; }
    .ch-bio-systems-content { transform: skewY(0deg); }
    .ch-bio-sys-buttons { grid-template-columns: 1fr; }
    .ch-bio-nav-btn.prev { left: 0; }
    .ch-bio-nav-btn.next { right: 0; }
}

/* ==========================================================================
   WRAPPER GERAL E GRADE (GRID) - COM CORTE INCLINADO (CLIP-PATH)
   ========================================================================== */

/* 1. Container Principal (MODO CLARO - PADRÃO) */
.ceclimar-biomar-full-wrapper {
    /* Fundo: Cinza Quase Branco */
    background-color: #f5f5f5; 
    position: relative; width: 100%; overflow: hidden; padding-bottom: 0; z-index: 1;
}

/* 2. A GRADE (LINHAS) COM CORTE INCLINADO + REMOÇÃO DA 1ª LINHA */
.ceclimar-biomar-full-wrapper::before {
    content: '';
    position: absolute; left: 0; width: 100%;
    
    /* Ocupa toda a altura, o corte será feito pelo clip-path */
    top: 0; bottom: 0;

    /* --- O SEGREDO DO CORTE DAS ORELHAS --- */
    /* Define um polígono que corta os cantos superior e inferior em ângulo */
    /* [AJUSTE] Desci o topo em +40px para remover a primeira linha de quadrados */
    /* (TopLeft: 50+40=90px, TopRight: 10+40=50px) */
    clip-path: polygon(
        0% 90px,                /* Topo Esquerdo (mais baixo) */
        100% 50px,              /* Topo Direito (mais alto) */
        100% calc(100% - 90px), /* Base Direita (mais alta) */
        0% calc(100% - 50px)    /* Base Esquerda (mais baixa) */
    );
    
    /* Desenho da Grade (MODO CLARO: LINHAS PRETAS SUAVES - 10% OPACIDADE) */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
        
    background-size: 40px 40px; background-position: center top; z-index: 0; pointer-events: none;
}

/* 3. OVERRIDES PARA MODO ESCURO (DARK MODE) */
body.ceclimar-dark-mode .ceclimar-biomar-full-wrapper {
    background-color: #1a1a1a !important; /* Fundo: Cinza Quase Preto */
}
body.ceclimar-dark-mode .ceclimar-biomar-full-wrapper::before {
    /* Grade: Linhas brancas bem suaves */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
}

/* 4. Ajustes de Camadas e Posição dos Shortcodes */
.ceclimar-biomar-inner-content {
    max-width: 1200px; margin: 0 auto; padding: 40px 20px; position: relative; z-index: 10;
}
.ceclimar-biomar-full-wrapper .ch-bio-tape-container {
    padding-top: 60px; margin-bottom: -30px; position: relative; z-index: 20; 
}
.ceclimar-biomar-full-wrapper .ch-bio-systems-wrapper {
    margin-top: -50px; padding-top: 80px; position: relative; z-index: 20; background: transparent !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .ceclimar-biomar-full-wrapper::before {
        background-size: 20px 20px; 
        /* Ajuste do corte para telas menores (mantendo proporção +40px de corte) */
        clip-path: polygon(0% 80px, 100% 50px, 100% calc(100% - 70px), 0% calc(100% - 40px));
    }
    .ceclimar-biomar-inner-content { padding: 20px; }
}