@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');

:root {
    --cyan: #00c2e8; --orange: #fb923c;
    --bg: #1a2a3f; --bg-card: #2d4a6e; --bg-raised: #3a5a82;
    --border: rgba(255,255,255,.13); --border-act: rgba(0,194,232,.5);
    --text-hi: #e8f0f8; --text-md: #7fa0be;
    --r-xl: 24px; --r-lg: 16px; --r-md: 12px;
    --font: 'Montserrat', sans-serif;
    --ease: .28s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: var(--font); background: var(--bg); color: var(--text-hi); min-height: 100vh; overflow-x: hidden; }

/* ── HEADER ── */
.cr-header {
    background: linear-gradient(135deg, #020c1b 0%, #0a1f3d 40%, #0d2a50 70%, #0a2040 100%);
    padding: 1.6rem 0; position: relative; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 1px 0 rgba(0,194,232,.12);
}
.cr-header::before {
    content: ''; position: absolute; right: 0; top: 0; width: 60%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 54,16 54,44 28,58 2,44 2,16' fill='none' stroke='rgba(0,194,232,0.13)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 56px 64px;
    mask-image: linear-gradient(to left, rgba(0,0,0,.7) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.7) 0%, transparent 100%);
    pointer-events: none;
}
.cr-header::after {
    content: ''; position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,194,232,.12) 0%, transparent 65%);
    pointer-events: none;
}
.cr-header__glow {
    position: absolute; left: -60px; bottom: -40px; width: 300px; height: 300px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(0,131,193,.15) 0%, transparent 65%);
    animation: pulse-glow 5s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.15); }
}
.cr-header__inner {
    max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 2.5rem;
    display: flex; align-items: center; gap: 1.1rem;
    position: relative; z-index: 1;
}
.cr-header__logo    { height: 42px; width: auto; flex-shrink: 0; opacity: .9; }
.cr-header__divider { width: 1px; height: 34px; background: rgba(0,194,232,.35); flex-shrink: 0; }
.cr-header__title   { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1.2; letter-spacing: -.01em; }
.cr-header__sub     { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.5); margin-top: .1rem; }

/* ── MAIN ── */
.cr-header, .cr-main { position: relative; z-index: 1; }
.cr-main { max-width: 1100px; width: 100%; margin: 0 auto; padding: 1rem 2.5rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.cr-section { display: flex; flex-direction: column; gap: .45rem; }
.cr-section__label { font-size: .75rem; font-weight: 900; color: rgba(255,255,255,.85); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: .45rem; }
.cr-section__label::before { content: ''; display: inline-block; width: 3px; height: 12px; background: var(--cyan); border-radius: 2px; }
.cr-grid { display: grid; gap: .75rem; }
.cr-grid--mandalas    { grid-template-columns: repeat(2, 1fr); }
.cr-grid--ferramentas { grid-template-columns: repeat(5, 1fr); }
.cr-grid--tutoriais   { grid-template-columns: repeat(2, 1fr); }

/* ── CARDS MANDALA ── */
.cr-card--mandala {
    background: var(--bg-card); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-xl);
    overflow: hidden; display: flex; flex-direction: column; position: relative; max-height: 260px;
    box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.cr-card--mandala:hover {
    transform: translateY(-5px) scale(1.015); border-color: var(--border-act);
    box-shadow: 0 0 0 1px rgba(0,194,232,.4), inset 0 1px 0 rgba(255,255,255,.25), 0 12px 40px rgba(0,0,0,.35), 0 0 60px -4px rgba(0,150,230,.3);
}
.cr-card--mandala .cr-card__link  { position: absolute; inset: 0; z-index: 2; }
.cr-card--mandala .cr-card__thumb { flex: 1; overflow: hidden; min-height: 0; }
.cr-card--mandala .cr-card__img   { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.cr-card--mandala:hover .cr-card__img { transform: scale(1.06); }
.cr-card--mandala .cr-card__body {
    height: 90px; padding: 0 1.25rem; display: flex; flex-direction: column;
    justify-content: center; gap: .25rem; flex-shrink: 0; position: relative; z-index: 1;
    background: linear-gradient(180deg, rgba(30,50,80,0) 0%, rgba(18,32,58,.97) 35%, rgba(22,38,65,1) 100%);
    border-top: 1px solid rgba(255,255,255,.08);
}
.cr-card--mandala .cr-card__title { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: -.02em; }
.cr-card--mandala .cr-card__desc  { font-size: .9rem; color: #d6eaff; line-height: 1.5; }

/* ── CARDS FERRAMENTA ── */
.cr-card--ferramenta {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden; display: flex; flex-direction: column; position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.cr-card--ferramenta:hover {
    transform: translateY(-4px) scale(1.02); border-color: rgba(0,194,232,.4);
    box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 50px -6px rgba(0,150,220,.4);
}
.cr-card--ferramenta .cr-card__link  { position: absolute; inset: 0; z-index: 1; }
.cr-card--ferramenta .cr-card__thumb { height: 88px; overflow: hidden; flex-shrink: 0; background: var(--bg-raised); }
.cr-card--ferramenta .cr-card__img   { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.65) brightness(.8); transition: transform .5s var(--ease), filter .5s var(--ease); }
.cr-card--ferramenta:hover .cr-card__img { transform: scale(1.07); filter: saturate(1) brightness(1); }
.cr-card--ferramenta .cr-card__body  { padding: .75rem .9rem .85rem; display: flex; flex-direction: column; gap: .18rem; }
.cr-card--ferramenta .cr-card__title { font-size: .9rem; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: -.01em; }
.cr-card--ferramenta .cr-card__desc  { font-size: .82rem; color: #c8dff5; line-height: 1.5; }

/* ── CARDS TUTORIAL (VÍDEO) ── */
.cr-card--tutorial {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl);
    overflow: hidden; display: flex; flex-direction: column; position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.cr-card--tutorial:hover {
    transform: translateY(-5px) scale(1.015); border-color: var(--border-act);
    box-shadow: 0 0 0 1px rgba(0,194,232,.4), inset 0 1px 0 rgba(255,255,255,.25), 0 12px 40px rgba(0,0,0,.35), 0 0 60px -4px rgba(0,150,230,.3);
}
.cr-card--tutorial .cr-card__video { 
    flex: 1; overflow: hidden; min-height: 0; background: #000;
}
.cr-video-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.cr-video-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.cr-card--tutorial .cr-card__body {
    height: 90px; padding: 0 1.25rem; display: flex; flex-direction: column;
    justify-content: center; gap: .25rem; flex-shrink: 0; position: relative; z-index: 1;
    background: linear-gradient(180deg, rgba(30,50,80,0) 0%, rgba(18,32,58,.97) 35%, rgba(22,38,65,1) 100%);
    border-top: 1px solid rgba(255,255,255,.08);
}
.cr-card--tutorial .cr-card__title { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: -.02em; }
.cr-card--tutorial .cr-card__desc  { font-size: .9rem; color: #d6eaff; line-height: 1.5; }

/* ── WHATSAPP ── */
.cr-wpp-list { display: flex; gap: .75rem; }
.cr-wpp-pill {
    flex: 1; display: flex; align-items: center; gap: .8rem;
    background: rgba(45,74,110,.95); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: .65rem 1.1rem; text-decoration: none;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
}
.cr-wpp-pill:hover { transform: translateY(-2px) scale(1.02); background: rgba(17,24,39,.95); border-color: rgba(37,211,102,.4); box-shadow: 0 6px 24px rgba(37,211,102,.15); }
.cr-wpp-pill__icon  { width: 28px; height: 28px; flex-shrink: 0; }
.cr-wpp-pill__text  { display: flex; flex-direction: column; gap: .1rem; }
.cr-wpp-pill__title { font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.2; }
.cr-wpp-pill__desc  { font-size: .82rem; color: #b8d4ee; line-height: 1.3; }

/* ── RESPONSIVE ── */
@media (min-width: 1400px) {
    .cr-main          { max-width: 1320px; padding: 1.25rem 2rem 1.5rem; }
    .cr-header__inner { max-width: 1320px; padding: 0 2rem; }
    .cr-card--mandala { max-height: 300px; }
    .cr-card--ferramenta .cr-card__thumb { height: 110px; }
}
@media (min-width: 1700px) {
    .cr-main          { max-width: 1380px; padding: 1.5rem 2.5rem 1.75rem; gap: 1.25rem; }
    .cr-header__inner { max-width: 1380px; padding: 0 2.5rem; }
    .cr-card--mandala { max-height: 340px; }
    .cr-card--mandala .cr-card__title { font-size: 1.25rem; }
    .cr-card--mandala .cr-card__desc  { font-size: .95rem; }
    .cr-card--ferramenta .cr-card__thumb { height: 130px; }
    .cr-card--ferramenta .cr-card__title { font-size: .9rem; }
    .cr-section__label { font-size: .8rem; }
    .cr-arc--1 { width: 1100px; height: 920px; }
    .cr-arc--2 { width: 1100px; height: 920px; }
}
@media (min-width: 2000px) {
    .cr-main, .cr-header__inner { max-width: 1800px; }
    .cr-card--mandala { max-height: 400px; }
    .cr-arc--1 { width: 1300px; height: 1080px; }
    .cr-arc--2 { width: 1300px; height: 1080px; }
}
@media (max-width: 860px) {
    .cr-grid--ferramentas { grid-template-columns: repeat(2, 1fr); }
    .cr-grid--tutoriais   { grid-template-columns: 1fr; }
    .cr-card--mandala     { min-height: 180px; max-height: none; }
    .cr-header            { padding: 1rem 0; }
    .cr-header__inner     { padding: 0 1.5rem; gap: .75rem; }
}
@media (max-width: 600px) {
    .cr-grid--mandalas  { grid-template-columns: 1fr; }
    .cr-grid--ferramentas { grid-template-columns: repeat(2, 1fr); }
    .cr-grid--tutoriais { grid-template-columns: 1fr; }
    .cr-wpp-list        { flex-direction: column; }
    .cr-main            { padding: 1rem 1rem 1.5rem; gap: .85rem; }
    .cr-header          { padding: 1.2rem 0; border-radius: 0 0 20px 20px; }
    .cr-header__inner   { padding: 0 1.25rem; gap: .75rem; }
    .cr-header__logo    { height: 26px; }
    .cr-header__divider { display: none; }
    .cr-header__title   { font-size: .95rem; }
    .cr-header__sub     { font-size: .68rem; }
}

/* ── ARCOS ── */
@keyframes arc-pulse-1 {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.04); }
}
@keyframes arc-pulse-2 {
    0%, 100% { opacity: .8; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.05); }
}
.cr-arc { position: fixed; pointer-events: none; z-index: 0; }

/* Magenta: lateral direita, terço superior */
.cr-arc--1 {
    width: 950px; height: 750px;
    top: -35vh; right: -10vw;
    border-radius: 50%;
    border: 130px solid rgba(237,22,81,.5);
    box-shadow: 0 0 80px 20px rgba(237,22,81,.22), inset 0 0 40px rgba(237,22,81,.1);
    animation: arc-pulse-1 18s ease-in-out infinite;
}

/* Ciano: lateral esquerda, terço inferior — espelho do magenta */
.cr-arc--2 {
    width: 950px; height: 750px;
    bottom: -50vh; left: -10vw;
    border-radius: 50%;
    border: 120px solid rgba(0,194,232,.48);
    box-shadow: 0 0 80px 20px rgba(0,194,232,.2), inset 0 0 40px rgba(0,194,232,.08);
    animation: arc-pulse-2 14s ease-in-out infinite;
}


/* ── BADGE "EM BREVE" ── */
.cr-badge-soon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, rgba(0, 194, 232, 0.15) 0%, rgba(0, 194, 232, 0.25) 100%);
    border: 1px solid rgba(0, 194, 232, 0.4);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: badge-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(0, 194, 232, 0.2);
}

@keyframes badge-pulse {
    0%, 100% {
        opacity: 0.8;
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 15px rgba(0, 194, 232, 0.2);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 0 25px rgba(0, 194, 232, 0.4);
    }
}

.cr-wpp-pill {
    position: relative;
}

/* Mobile: badge embaixo do texto */
@media (max-width: 768px) {
    .cr-badge-soon {
        position: static;
        display: inline-block;
        margin-top: 0.5rem;
        transform: none;
        font-size: 0.65rem;
        padding: 0.3rem 0.75rem;
    }
    
    @keyframes badge-pulse {
        0%, 100% {
            opacity: 0.8;
            transform: scale(1);
            box-shadow: 0 0 15px rgba(0, 194, 232, 0.2);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(0, 194, 232, 0.4);
        }
    }
    
    .cr-wpp-pill__text {
        display: flex;
        flex-direction: column;
    }
}