/* =====================================================================
   components.css — componentes reutilizáveis
===================================================================== */

/* ----------------------------------------------- LOGO Novren (wordmark) */
.logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    color: var(--ink);
}
.logo--full { font-size: 1em; }
/* o wordmark é um SVG: escala pela altura, relativa ao font-size */
.logo__mark { display: inline-flex; }
.logo__mark svg {
    height: .62em;
    width: auto;
    display: block;
    color: currentColor;       /* paths usam fill="currentColor" */
}

.logo__reg {
    font-size: .34em;
    font-weight: 500;
    align-self: flex-start;
    margin-top: .12em;
    margin-left: .12em;
}
.logo__tagline {
    margin-left: .42em;
    padding-left: .42em;
    border-left: 1px solid currentColor;
    font-size: .30em;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: pre-line;
    align-self: center;
    opacity: .9;
    font-family: var(--font-mono);
}

/* símbolo = dot ● */
.logo--symbol { font-size: 1em; }
.logo__dot {
    display: inline-block;
    width: .7em; height: .7em;
    border-radius: 50%;
    background: currentColor;
}

/* --------------------------------------------------- PÍLULA INLINE */
.pill-inline {
    display: inline-block;
    padding: 1px 11px 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: .92em;
    color: var(--primary);
    background: var(--white);
    vertical-align: baseline;
}

/* ---------------------------------------------- LINHA COM LABEL */
.line-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
}
.line-label__text { font-size: 14px; color: var(--text); white-space: nowrap; }
.line-label__rule { flex: 1; height: 1px; background: var(--border); }
.line-label__right {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; color: var(--primary); white-space: nowrap;
    transition: opacity .2s var(--ease);
}
.line-label__right .icon { width: 15px; height: 15px; }
.line-label__right:hover { opacity: .7; }

/* ----------------------------------------------------------- CTA */
.cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    font-size: 14.5px; font-weight: 500;
    box-shadow: 0 10px 24px -10px rgba(26,25,227,.6);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.cta .icon { width: 18px; height: 18px; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(26,25,227,.65); }
.cta:active { transform: translateY(0); }
.cta--ghost { background: var(--white); color: var(--primary); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* ------------------------------------------------- CARD DE COR */
.color-card { display: flex; flex-direction: column; gap: 12px; }
.color-card__swatch {
    position: relative;
    height: 150px;
    border-radius: 14px;
    background: var(--swatch);
    border: 1px solid rgba(21,15,76,.06);
    overflow: hidden;
    display: grid; place-items: center;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.color-card__swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.copy-btn__label {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 500;
    opacity: 0; transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.copy-btn--light .copy-btn__label { background: var(--primary); color: #fff; }
.copy-btn--dark  .copy-btn__label { background: var(--white); color: var(--primary); box-shadow: var(--shadow-sm); }
.color-card__swatch:hover .copy-btn__label,
.color-card__swatch:focus-visible .copy-btn__label { opacity: 1; transform: translateY(0); }

.color-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-soft);
}
.color-card__hex { color: var(--text); font-weight: 600; }
.color-card__rgb { text-align: left; }
.color-card__hsl { text-align: right; }

/* ----------------------------------- TABS / PALCO DE VERSÃO DE LOGO */
.logo-version { display: flex; flex-direction: column; gap: 14px; }
.logo-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--soft-lavender);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 5px;
    gap: 4px;
}
.logo-tab {
    padding: 11px;
    border-radius: 10px;
    font-size: 14px; font-weight: 500;
    color: var(--text-soft);
    transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.logo-tab.is-active { background: var(--white); color: var(--text); box-shadow: var(--shadow-sm); }
/* sobre fundo escuro, aba ativa fica azul-acinzentada */
.logo-version.on-dark .logo-tab { color: var(--text-soft); }

.logo-stage {
    border-radius: var(--radius-lg);
    min-height: 230px;
    display: grid; place-items: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.logo-stage--lavender { background: var(--lavender-card); }
.logo-stage--primary  { background: var(--primary); }
.logo-stage--muted    { background: var(--blue-muted); }
.logo-stage .logo { font-size: clamp(40px, 7vw, 88px); }

.logo-panel { display: none; }
.logo-panel.is-active { display: grid; place-items: center; animation: fadeScale .4s var(--ease-out); }

/* ----------------------------------------------------- CARROSSEL */
.carousel { position: relative; overflow: hidden; }
.carousel__track {
    display: flex;
    gap: 20px;
    transition: transform .55s var(--ease);
    will-change: transform;
}
.carousel__slide { flex: 0 0 100%; }                 /* default: 1 por vez */
.carousel--photo .carousel__slide { flex: 0 0 60%; } /* peek: vizinhos aparecem */
.carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* nos modos com peek, slides inativos ficam levemente apagados */
.carousel--photo .carousel__slide { transition: opacity .4s var(--ease); }
.carousel--photo .carousel__slide:not(.is-active) { opacity: .55; cursor: pointer; }

.carousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow);
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.carousel__arrow:hover { transform: translateY(-50%) scale(1.08); }
.carousel__arrow--prev { left: 18px; }
.carousel__arrow--next { right: 18px; }
.carousel__arrow .icon { width: 20px; height: 20px; }

.carousel__dots {
    display: flex; gap: 8px; justify-content: center;
    margin-top: 18px;
}
.carousel__dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--border);
    transition: width .25s var(--ease), background .25s var(--ease);
}
.carousel__dot.is-active { width: 22px; background: var(--primary); }

/* -------------------------------------------------- TYPE TESTER */
.type-tester {
    background: var(--soft-lavender);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(18px, 3vw, 34px);
    display: flex; flex-direction: column; gap: 16px;
}
.type-tester__row { display: flex; flex-direction: column; gap: 8px; }
.type-tester__label { font-size: 13px; color: var(--text-soft); }
.type-tester__label b { color: var(--text); font-weight: 600; }
.type-tester__field {
    margin-top: 8px;
    font-size: var(--tt-size, 60px);
    font-weight: var(--tt-weight, 400);
    line-height: 1.1;
    color: var(--text);
    outline: none;
    word-break: break-word;
    transition: font-size .05s linear;
}
.type-tester__field:empty::before { content: 'Escreva aqui...'; color: var(--text-soft); }

/* slider trilha clara + bolinha azul */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px;
    background: linear-gradient(var(--primary), var(--primary)) 0/var(--fill,0%) 100% no-repeat, var(--border); cursor: pointer; }
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(26,25,227,.4);
    transition: transform .15s var(--ease);
}
.slider::-webkit-slider-thumb:active { transform: scale(1.15); }
.slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--primary); border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(26,25,227,.4);
}
.slider::-moz-range-progress { background: var(--primary); height: 4px; border-radius: 999px; }

/* ---------------------------------------------------------- TOAST */
.toast {
    position: fixed;
    left: 50%; bottom: 30px;
    transform: translate(-50%, 20px);
    z-index: 80;
    display: flex; align-items: center; gap: 10px;
    background: var(--ink); color: #fff;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    font-size: 13.5px; font-weight: 500;
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }

/* ------------------------------------------------- SCROLL DOWN float */
.scroll-down-float {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--primary);
}
.scroll-down-float .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------- pílula legenda */
.tag-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--soft-lavender);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
}