/*
Theme Name: Chantell
Theme URI: https://chantellcooley.com
Author: Hipercode
Author URI: https://hipercode.com.br
Description: Tema próprio da Chantell Cooley Ministries (marca "Sacerdócio de Mercado"). Porta o design system da SPA React de referência (bloom-path-global): paleta cream + laranja, tipografia Lektorat / PP Neue Montreal / Tentang Nanti, type fluido e easings premium. As seções animadas (Framer Motion 1:1) vivem em blocos Gutenberg no plugin chantell-blocks; este tema entrega o shell (header, footer, catálogo, blog).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chantell
Tags: e-commerce, custom-menu, featured-images, translation-ready, two-columns
*/

/*
  CSS de componentes do SHELL do tema.
  Tokens de design ficam em assets/css/tokens.css (carregado antes deste arquivo).
  Convenção de classes: prefixo .cc- (Chantell Cooley) pra não colidir com blocos.
*/

/* ═══════════════════════ Header fixo ═══════════════════════ */

.cc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background-color: hsl(var(--background));
  transition:
    background-color 0.5s ease,
    transform 0.6s var(--ease-smooth),
    opacity 0.6s var(--ease-smooth);
}

@media (min-width: 768px) {
  .cc-header { padding-inline: 2.5rem; }
}

body.admin-bar .cc-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .cc-header { top: 46px; }
}

/* Esconde ao rolar pra baixo (porta do useScrollDirection) */
.cc-header--hidden {
  transform: translateY(-100%);
  opacity: 0;
  transition-duration: 0.5s;
}

body.cc-menu-open .cc-header {
  background-color: transparent;
}

/* Logo texto */
.cc-header__logo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 1.25rem;
  line-height: 1.05;
  color: hsl(var(--foreground));
  position: relative;
  z-index: 51;
  transition: color 0.5s ease;
  white-space: nowrap;
}

body.cc-menu-open .cc-header__logo {
  color: hsl(var(--primary-foreground));
}

/* Nav central — desktop */
.cc-header__nav {
  display: none;
  align-items: center;
  gap: 2rem;
  transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
  .cc-header__nav { display: flex; }
}

body.cc-menu-open .cc-header__nav {
  opacity: 0;
  pointer-events: none;
}

.cc-header__nav a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--foreground));
  transition: color 0.3s ease;
  cursor: pointer;
}

.cc-header__nav a:hover {
  color: hsl(var(--primary));
}

/* Lado direito: idioma + botão do menu */
.cc-header__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 51;
}

.cc-lang {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.cc-lang__link {
  padding: 0.25rem 0.375rem;
  color: hsl(var(--muted-foreground));
  transition: color 0.3s ease;
}

.cc-lang__link:hover { color: hsl(var(--foreground)); }
.cc-lang__link.is-current { color: hsl(var(--primary)); }
.cc-lang__sep { color: hsl(var(--muted-foreground)); }

body.cc-menu-open .cc-lang__link { color: hsl(var(--primary-foreground) / 0.5); }
body.cc-menu-open .cc-lang__link:hover { color: hsl(var(--primary-foreground)); }
body.cc-menu-open .cc-lang__link.is-current { color: hsl(var(--primary)); }
body.cc-menu-open .cc-lang__sep { color: hsl(var(--primary-foreground) / 0.3); }

/* Botão Menu / Fechar */
.cc-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.125rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  transition: all 0.5s ease;
}

.cc-menu-btn:hover { background-color: hsl(var(--secondary) / 0.9); }

body.cc-menu-open .cc-menu-btn {
  background-color: hsl(var(--primary-foreground));
  color: hsl(var(--secondary));
}

body.cc-menu-open .cc-menu-btn:hover {
  background-color: hsl(var(--primary-foreground) / 0.9);
}

.cc-menu-btn__label-close { display: none; }
body.cc-menu-open .cc-menu-btn__label-open { display: none; }
body.cc-menu-open .cc-menu-btn__label-close { display: inline; }

.cc-menu-btn__icon {
  position: relative;
  width: 1.25rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-menu-btn__bar {
  position: absolute;
  width: 1.25rem;
  height: 2px;
  background-color: hsl(var(--secondary-foreground));
  transition: all 0.5s var(--ease-premium);
}

.cc-menu-btn__bar--top { transform: translateY(-3px); }
.cc-menu-btn__bar--bottom { transform: translateY(3px); }

body.cc-menu-open .cc-menu-btn__bar {
  background-color: hsl(var(--secondary));
}

body.cc-menu-open .cc-menu-btn__bar--top { transform: rotate(45deg); }
body.cc-menu-open .cc-menu-btn__bar--bottom { transform: rotate(-45deg); }

/* ═══════════════════════ Overlay do menu (fullscreen) ═══════════════════════ */

.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: hsl(var(--secondary));
  display: flex;
  flex-direction: column;
  /* fechado: clip de cima pra baixo, como no Navigation.tsx */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path 0.6s var(--ease-premium) 0.2s,
    visibility 0s linear 0.8s;
}

body.cc-menu-open .cc-overlay {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition: clip-path 0.8s var(--ease-premium);
}

/* Linha divisória sob a navbar */
.cc-overlay__divider {
  position: absolute;
  top: var(--navbar-height);
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background-color: hsl(var(--secondary-foreground) / 0.15);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-premium);
}

@media (min-width: 768px) {
  .cc-overlay__divider { left: 2.5rem; right: 2.5rem; }
}

body.cc-menu-open .cc-overlay__divider {
  transform: scaleX(1);
  transition-delay: 0.4s;
}

/* Área central com os links gigantes */
.cc-overlay__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) { .cc-overlay__main { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .cc-overlay__main { padding-inline: 5rem; } }

.cc-overlay__nav {
  display: flex;
  flex-direction: column;
}

.cc-overlay__item {
  overflow: hidden;
  border-bottom: 1px solid hsl(var(--secondary-foreground) / 0.1);
}

.cc-overlay__item:last-child { border-bottom: 0; }

.cc-overlay__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.75rem;
  cursor: pointer;
  /* entrada staggered (porta do linkVariants) */
  transform: translateY(80px);
  opacity: 0;
  transition:
    transform 0.4s var(--ease-premium),
    opacity 0.4s var(--ease-premium);
}

@media (min-width: 768px) {
  .cc-overlay__link { gap: 2rem; padding-block: 1rem; }
}

body.cc-menu-open .cc-overlay__link {
  transform: translateY(0);
  opacity: 1;
  transition-duration: 0.7s;
}

/* stagger: delay 0.3 + i * 0.08 (até 8 itens) */
body.cc-menu-open .cc-overlay__item:nth-child(1) .cc-overlay__link { transition-delay: 0.30s; }
body.cc-menu-open .cc-overlay__item:nth-child(2) .cc-overlay__link { transition-delay: 0.38s; }
body.cc-menu-open .cc-overlay__item:nth-child(3) .cc-overlay__link { transition-delay: 0.46s; }
body.cc-menu-open .cc-overlay__item:nth-child(4) .cc-overlay__link { transition-delay: 0.54s; }
body.cc-menu-open .cc-overlay__item:nth-child(5) .cc-overlay__link { transition-delay: 0.62s; }
body.cc-menu-open .cc-overlay__item:nth-child(6) .cc-overlay__link { transition-delay: 0.70s; }
body.cc-menu-open .cc-overlay__item:nth-child(7) .cc-overlay__link { transition-delay: 0.78s; }
body.cc-menu-open .cc-overlay__item:nth-child(8) .cc-overlay__link { transition-delay: 0.86s; }

.cc-overlay__num {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--primary));
  transition: color 0.5s ease;
}

@media (min-width: 768px) {
  .cc-overlay__num { font-size: 0.875rem; }
}

.cc-overlay__text {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  color: hsl(var(--secondary-foreground));
  transition: color 0.5s ease;
}

/* Dim dos itens não-hovered (porta do hoveredIndex) */
.cc-overlay__nav:hover .cc-overlay__item:not(:hover) .cc-overlay__num,
.cc-overlay__nav:hover .cc-overlay__item:not(:hover) .cc-overlay__text {
  color: hsl(var(--secondary-foreground) / 0.2);
}

/* Seta no hover */
.cc-overlay__arrow {
  margin-left: auto;
  font-family: var(--font-body);
  color: hsl(var(--primary));
  font-size: 1.5rem;
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 0.4s var(--ease-premium),
    transform 0.4s var(--ease-premium);
}

@media (min-width: 768px) {
  .cc-overlay__arrow { font-size: 2.25rem; }
}

.cc-overlay__item:hover .cc-overlay__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Barra inferior do overlay (socials + contato) */
.cc-overlay__footer {
  padding: 0 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.3s var(--ease-premium),
    transform 0.3s var(--ease-premium);
}

@media (min-width: 768px) {
  .cc-overlay__footer {
    flex-direction: row;
    align-items: flex-end;
    padding: 0 2.5rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .cc-overlay__footer { padding-inline: 5rem; }
}

body.cc-menu-open .cc-overlay__footer {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.6s;
  transition-delay: 0.7s;
}

.cc-overlay__footer-label {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: hsl(var(--secondary-foreground) / 0.4);
  margin-bottom: 0.75rem;
}

.cc-overlay__footer-links { display: flex; gap: 1.5rem; }

.cc-overlay__footer a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: hsl(var(--secondary-foreground) / 0.7);
  transition: color 0.3s ease;
}

.cc-overlay__footer a:hover { color: hsl(var(--primary)); }

@media (min-width: 768px) {
  .cc-overlay__contact { text-align: right; }
}

/* ═══════════════════════ Footer (porta do Footer.tsx) ═══════════════════════ */

.cc-footer {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cc-footer__top {
  background-color: hsl(var(--cream));
  color: hsl(var(--foreground));
  border-top: 1px solid hsl(var(--foreground) / 0.1);
  padding: 3rem 1.5rem 2rem;
}

@media (min-width: 768px) {
  .cc-footer__top { padding-inline: 2.5rem; }
}

.cc-footer__cols {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .cc-footer__cols { flex-direction: row; gap: 8rem; }
  .cc-footer__col--contact { margin-left: auto; }
}

.cc-footer__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

.cc-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc-footer__links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  transition: color 0.3s ease;
}

.cc-footer__links a:hover { color: hsl(var(--primary)); }

/* Bloco gigante com gradiente */
.cc-footer__giant {
  position: relative;
  padding-inline: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(
    to bottom,
    hsl(36 23% 90%),
    hsl(36 23% 85%) 70%,
    hsl(11 87% 57% / 0.08)
  );
}

@media (min-width: 768px) {
  .cc-footer__giant { padding-inline: 2.5rem; }
}

.cc-footer__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.cc-footer__meta p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: hsl(var(--foreground) / 0.6);
}

.cc-footer__name-wrap {
  overflow: hidden;
  padding-bottom: 1rem;
}

.cc-footer__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  line-height: 0.85;
  white-space: nowrap;
  font-size: clamp(3rem, 13vw, 15rem);
}

/* ═══════════════════════ Reveal on scroll (equivalente leve do useInView) ═══════════════════════ */

.cc-reveal {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.9s var(--ease-premium),
    transform 0.9s var(--ease-premium);
}

.cc-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.cc-reveal--left { transform: translateX(-60px); }
.cc-reveal--right { transform: translateX(60px); }
.cc-reveal--left.is-inview,
.cc-reveal--right.is-inview { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .cc-reveal { opacity: 1; transform: none; transition: none; }
  .cc-overlay, .cc-overlay__link, .cc-overlay__divider, .cc-overlay__footer { transition-duration: 0.01s; }
}

/* ═══════════════════════ Catálogo (porta do CategoryPage.tsx) ═══════════════════════ */

.cc-cat {
  min-height: 100vh;
}

.cc-cat__hero-wrap { position: relative; }

.cc-cat__hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 1.5rem;
  overflow: hidden;
}

.cc-cat__label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 25px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--secondary-foreground) / 0.8);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .cc-cat__label { font-size: 18px; }
}

.cc-cat__label .font-accent {
  text-transform: uppercase;
  color: hsl(var(--primary));
}

.cc-cat__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: hsl(var(--secondary-foreground));
  line-height: 0.9;
  white-space: nowrap;
  font-size: clamp(4rem, 14vw, 14rem);
}

.cc-cat__scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--secondary-foreground) / 0.5);
}

/* entrada do hero (porta dos motion delays 0.4/0.5/1.2) */
.cc-cat__label,
.cc-cat__title,
.cc-cat__scroll-hint {
  opacity: 0;
  transform: translateY(20px);
  animation: cc-fade-up 0.7s var(--ease-premium) forwards;
}

.cc-cat__label { animation-delay: 0.4s; }
.cc-cat__title { transform: translateY(60px); animation-duration: 0.9s; animation-delay: 0.5s; }
.cc-cat__scroll-hint { transform: none; animation-duration: 0.8s; animation-delay: 1.2s; }

@keyframes cc-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Lista que sobe por cima do hero sticky */
.cc-cat__list-wrap {
  position: relative;
  z-index: 10;
  background-color: hsl(var(--dark-card));
  color: hsl(0 0% 100%);
}

.cc-cat__list {
  max-width: 80rem;
  margin-inline: auto;
  padding: 6rem 1rem 8rem;
}

@media (min-width: 768px) {
  .cc-cat__list { padding-inline: 2.5rem; }
}

.cc-cat__row {
  display: block;
  position: relative;
  border-top: 1px solid hsl(var(--secondary-foreground) / 0.1);
  cursor: pointer;
}

.cc-cat__row-end { border-top: 1px solid hsl(var(--secondary-foreground) / 0.1); }

.cc-cat__row-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 0.5rem;
  transition: background-color 0.5s ease;
}

@media (min-width: 768px) {
  .cc-cat__row-inner { padding: 3rem 1.5rem; }
}

.cc-cat__row:hover .cc-cat__row-inner {
  background-color: hsl(var(--secondary-foreground) / 0.03);
}

.cc-cat__row-main {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  min-width: 0;
  flex: 1;
}

@media (min-width: 768px) {
  .cc-cat__row-main { gap: 3rem; }
}

.cc-cat__row-num {
  font-family: var(--font-accent);
  font-style: italic;
  color: hsl(var(--primary));
  font-size: 1.25rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .cc-cat__row-num { font-size: 1.5rem; }
}

.cc-cat__row-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: hsl(var(--secondary-foreground));
  line-height: 0.95;
  font-size: clamp(2rem, 6vw, 5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.5s var(--ease-premium);
}

.cc-cat__row:hover .cc-cat__row-title {
  transform: translateX(0.75rem);
}

.cc-cat__row-cta {
  display: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--secondary-foreground) / 0.4);
  flex-shrink: 0;
  transition: color 0.3s ease;
}

@media (min-width: 768px) {
  .cc-cat__row-cta { display: inline-block; }
}

.cc-cat__row:hover .cc-cat__row-cta { color: hsl(var(--primary)); }

.cc-cat__empty {
  padding: 4rem 0;
  font-family: var(--font-body);
  color: hsl(var(--secondary-foreground) / 0.6);
}

/* Preview de imagem que segue o cursor */
.cc-cat__preview {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  .cc-cat__preview { display: block; }
}

.cc-cat__preview-box {
  width: 260px;
  height: 340px;
  overflow: hidden;
  border-radius: 0.375rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.4s var(--ease-premium),
    transform 0.4s var(--ease-premium);
}

.cc-cat__preview.is-active .cc-cat__preview-box {
  opacity: 1;
  transform: scale(1);
}

.cc-cat__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════════ Mentorias (porta do MentoriasPage.tsx) ═══════════════════════ */

.cc-ment__hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 3rem;
}

.cc-ment__intro {
  margin-top: 2rem;
  max-width: 42rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(var(--secondary-foreground) / 0.7);
  opacity: 0;
  transform: translateY(30px);
  animation: cc-fade-up 0.7s var(--ease-premium) 0.7s forwards;
}

@media (min-width: 768px) {
  .cc-ment__intro { font-size: 1.125rem; }
}

.cc-ment__section {
  padding: 0 1.5rem 6rem;
}

@media (min-width: 768px) {
  .cc-ment__section { padding: 0 2.5rem 8rem; }
}

.cc-tiers {
  max-width: 80rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .cc-tiers { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .cc-tiers { gap: 2.5rem; }
}

.cc-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid hsl(var(--secondary-foreground) / 0.1);
  scroll-margin-top: 6rem;
}

.cc-tier--highlighted {
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: 0 25px 50px -12px hsl(var(--primary) / 0.1);
}

@media (min-width: 1024px) {
  .cc-tier--highlighted { transform: translateY(-1rem); }
  .cc-tier--highlighted.cc-reveal { transform: translateY(calc(-1rem + 60px)); }
  .cc-tier--highlighted.cc-reveal.is-inview { transform: translateY(-1rem); }
}

.cc-tier__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
}

.cc-tier__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: hsl(var(--secondary-foreground) / 0.05);
}

.cc-tier__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cc-tier__media:hover img { transform: scale(1.04); }

.cc-tier__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: hsl(var(--secondary-foreground) / 0.2);
  text-transform: uppercase;
}

.cc-tier__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background-color: hsl(var(--secondary) / 0.4);
  backdrop-filter: blur(4px);
}

@media (min-width: 768px) {
  .cc-tier__body { padding: 2.25rem; }
}

.cc-tier__name {
  font-family: var(--font-display);
  font-size: 1.875rem;
  color: hsl(var(--secondary-foreground));
  line-height: 0.95;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .cc-tier__name { font-size: 2.25rem; }
}

.cc-tier__tagline {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: hsl(var(--secondary-foreground) / 0.6);
  margin-bottom: 1.5rem;
}

.cc-tier__price {
  font-family: var(--font-display);
  font-size: 1.875rem;
  color: hsl(var(--primary));
  margin-bottom: 1.75rem;
}

.cc-tier__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.cc-tier__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: hsl(var(--secondary-foreground) / 0.8);
  line-height: 1.625;
}

.cc-tier__list .cc-icon {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--primary));
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.cc-tier__cta {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 1rem;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  background-color: hsl(var(--secondary-foreground) / 0.1);
  color: hsl(var(--secondary-foreground));
  transition: all 0.3s ease;
  cursor: pointer;
}

.cc-tier__cta:hover { background-color: hsl(var(--secondary-foreground) / 0.2); }

.cc-tier--highlighted .cc-tier__cta {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.cc-tier--highlighted .cc-tier__cta:hover {
  background-color: hsl(var(--primary) / 0.9);
}

/* Tabela comparativa */
.cc-compare { max-width: 72rem; margin-inline: auto; }

.cc-compare__head {
  text-align: center;
  margin-bottom: 3rem;
}

.cc-compare__kicker {
  font-family: var(--font-accent);
  font-style: italic;
  color: hsl(var(--primary));
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.cc-compare__title {
  font-family: var(--font-display);
  color: hsl(var(--secondary-foreground));
  line-height: 0.95;
  font-size: clamp(2.5rem, 6vw, 5rem);
}

.cc-compare__scroll {
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--secondary-foreground) / 0.1);
}

.cc-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.cc-compare thead tr {
  background-color: hsl(var(--secondary-foreground) / 0.05);
}

.cc-compare th {
  padding: 1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: hsl(var(--secondary-foreground));
  text-align: center;
}

@media (min-width: 768px) {
  .cc-compare th { padding: 1.5rem; font-size: 1.25rem; }
}

.cc-compare th.cc-compare__feature {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(var(--secondary-foreground) / 0.6);
}

.cc-compare th.is-gold { color: hsl(var(--primary)); }

.cc-compare tbody tr {
  border-top: 1px solid hsl(var(--secondary-foreground) / 0.1);
}

.cc-compare tbody tr:nth-child(even) {
  background-color: hsl(var(--secondary-foreground) / 0.02);
}

.cc-compare tbody tr.cc-compare__row-value {
  background-color: hsl(var(--primary) / 0.05);
}

.cc-compare td {
  padding: 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-align: center;
  vertical-align: top;
  color: hsl(var(--secondary-foreground) / 0.8);
}

@media (min-width: 768px) {
  .cc-compare td { padding: 1.5rem; }
}

.cc-compare td.cc-compare__label { text-align: left; }
.cc-compare td.is-gold { color: hsl(var(--secondary-foreground)); }

.cc-compare__row-value td:not(.cc-compare__label) {
  font-family: var(--font-display);
  color: hsl(var(--primary));
  font-size: 1.125rem;
}

@media (min-width: 768px) {
  .cc-compare__row-value td:not(.cc-compare__label) { font-size: 1.25rem; }
}

.cc-compare .cc-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-inline: auto;
  color: hsl(var(--primary));
}

.cc-compare .cc-icon--muted { color: hsl(var(--secondary-foreground) / 0.3); }

/* CTA final */
.cc-final-cta {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.cc-final-cta__title {
  font-family: var(--font-display);
  color: hsl(var(--secondary-foreground));
  line-height: 0.95;
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.cc-final-cta__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: hsl(var(--secondary-foreground) / 0.7);
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .cc-final-cta__desc { font-size: 1.125rem; }
}

.cc-final-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.cc-final-cta__btn:hover { background-color: hsl(var(--primary) / 0.9); }

/* ═══════════════════════ Single de produto (porta do ProductDetail.tsx) ═══════════════════════ */

.cc-product {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 5rem 1.5rem 4rem;
}

@media (min-width: 768px) {
  .cc-product { padding-inline: 4rem; }
}

@media (min-width: 1024px) {
  .cc-product { padding-inline: 6rem; }
}

.cc-product__inner {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .cc-product__inner { flex-direction: row; gap: 5rem; }
}

.cc-product__media {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .cc-product__media { width: 50%; }
}

.cc-product__cover {
  position: relative;
  width: 280px;
  aspect-ratio: 3 / 4;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  background-color: hsl(var(--secondary-foreground) / 0.05);
}

@media (min-width: 768px) {
  .cc-product__cover { width: 360px; }
}

@media (min-width: 1024px) {
  .cc-product__cover { width: 420px; }
}

.cc-product__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-product__info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .cc-product__info {
    width: 50%;
    align-items: flex-start;
    text-align: left;
  }
}

.cc-product__num {
  font-family: var(--font-accent);
  font-style: italic;
  color: hsl(var(--primary));
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.cc-product__title {
  font-family: var(--font-display);
  color: hsl(var(--secondary-foreground));
  line-height: 0.95;
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.cc-product__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  color: hsl(var(--secondary-foreground) / 0.7);
  margin-bottom: 2rem;
  max-width: 32rem;
}

@media (min-width: 768px) {
  .cc-product__desc { font-size: 18px; }
}

.cc-product__price-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(var(--secondary-foreground) / 0.4);
  margin-bottom: 0.5rem;
}

.cc-product__price {
  font-family: var(--font-display);
  font-size: 1.875rem;
  color: hsl(var(--primary));
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .cc-product__price { font-size: 2.25rem; }
}

.cc-product__price .amount { color: inherit; }

/* Esgotado: substitui o botão que não existe por uma explicação. Discreto de
   propósito — é informação, não alarme. */
.cc-product__soldout {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--secondary-foreground) / 0.7);
}

.cc-product__soldout strong {
  display: block;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: hsl(var(--secondary-foreground) / 0.95);
}

.cc-product__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .cc-product__actions { flex-direction: row; }
}

.cc-product__buy {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 400;
}

.cc-product__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid hsl(var(--secondary-foreground) / 0.2);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--secondary-foreground) / 0.7);
  transition: all 0.3s ease;
  cursor: pointer;
}

.cc-product__secondary:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.cc-product__secondary .cc-icon { width: 1rem; height: 1rem; }

.cc-product__back {
  margin-top: 2.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--secondary-foreground) / 0.4);
  transition: color 0.3s ease;
}

.cc-product__back:hover { color: hsl(var(--primary)); }

/* Estado "não encontrado" */
.cc-product-missing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  text-align: center;
}

.cc-product-missing h1 {
  font-size: 2.25rem;
  color: hsl(var(--secondary-foreground));
  margin-bottom: 1rem;
}

.cc-product-missing a {
  font-family: var(--font-body);
  color: hsl(var(--primary));
}

.cc-product-missing a:hover { text-decoration: underline; }

/* ═══════════════════════ Blog (home.php + single.php) ═══════════════════════ */

.cc-main-offset {
  padding-top: calc(var(--navbar-height) + 2rem);
}

.cc-blog {
  min-height: 100vh;
  padding-bottom: 6rem;
}

.cc-blog__head {
  max-width: 80rem;
  margin-inline: auto;
  padding: 3rem 1.5rem 2rem;
}

@media (min-width: 768px) {
  .cc-blog__head { padding-inline: 2.5rem; }
}

.cc-blog__kicker {
  font-family: var(--font-accent);
  font-style: italic;
  color: hsl(var(--primary));
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.cc-blog__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 0.95;
  color: hsl(var(--foreground));
}

.cc-blog__grid {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .cc-blog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cc-blog__grid { grid-template-columns: repeat(3, 1fr); padding-inline: 2.5rem; }
}

.cc-card {
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--card));
  border-radius: 0.5rem;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s var(--ease-premium);
}

.cc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.2);
}

.cc-card__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: hsl(var(--muted));
}

.cc-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-premium);
}

.cc-card:hover .cc-card__thumb img { transform: scale(1.04); }

.cc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.cc-card__meta {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.75rem;
}

.cc-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  color: hsl(var(--card-foreground));
  margin-bottom: 0.75rem;
}

.cc-card__title a { color: inherit; transition: color 0.3s ease; }
.cc-card__title a:hover { color: hsl(var(--primary)); }

.cc-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.25rem;
}

.cc-card__more {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(var(--primary));
}

.cc-card__more:hover { text-decoration: underline; }

/* Paginação */
.cc-pagination {
  max-width: 80rem;
  margin: 3rem auto 0;
  padding-inline: 1.5rem;
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
}

.cc-pagination .page-numbers {
  padding: 0.5rem 0.875rem;
  border: 1px solid hsl(var(--foreground) / 0.15);
  border-radius: 0.25rem;
  color: hsl(var(--foreground));
  transition: all 0.3s ease;
}

.cc-pagination .page-numbers.current,
.cc-pagination .page-numbers:hover {
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
}

/* Post single — coluna de leitura confortável */
.cc-post {
  padding-bottom: 6rem;
}

.cc-post__header {
  max-width: 46rem;
  margin-inline: auto;
  padding: 3rem 1.5rem 2rem;
  text-align: center;
}

.cc-post__meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

.cc-post__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  color: hsl(var(--foreground));
}

.cc-post__thumb {
  max-width: 60rem;
  margin: 1.5rem auto 0;
  padding-inline: 1.5rem;
}

.cc-post__thumb img {
  width: 100%;
  border-radius: 0.5rem;
}

/* Prose compartilhado (single, page) */
.cc-prose {
  max-width: 45rem; /* ~720px: coluna confortável */
  margin-inline: auto;
  padding: 2rem 1.5rem 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: hsl(var(--foreground) / 0.85);
}

.cc-prose > * + * { margin-top: 1.25em; }

.cc-prose h2, .cc-prose h3, .cc-prose h4 {
  color: hsl(var(--foreground));
  margin-top: 2em;
}

.cc-prose h2 { font-size: var(--text-h3); }
.cc-prose h3 { font-size: var(--text-h4); }

.cc-prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-prose a:hover { color: hsl(var(--primary) / 0.8); }

.cc-prose blockquote {
  border-left: 3px solid hsl(var(--primary));
  padding-left: 1.25rem;
  font-family: var(--font-accent);
  font-size: 1.25rem;
  color: hsl(var(--foreground) / 0.7);
}

.cc-prose ul, .cc-prose ol { padding-left: 1.5rem; }
.cc-prose li + li { margin-top: 0.5em; }

.cc-prose img { border-radius: 0.5rem; }

.cc-prose figcaption {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.5rem;
  text-align: center;
}

.cc-prose hr {
  border: 0;
  border-top: 1px solid hsl(var(--foreground) / 0.1);
  margin-block: 2.5rem;
}

/* Página genérica */
.cc-page__header {
  max-width: 46rem;
  margin-inline: auto;
  padding: 3rem 1.5rem 0;
  text-align: center;
}

.cc-page__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  color: hsl(var(--foreground));
}

/* ═══════════════════════ 404 ═══════════════════════ */

.cc-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--muted));
  text-align: center;
  padding-inline: 1.5rem;
}

.cc-404__code {
  font-family: var(--font-display);
  font-size: var(--text-h0);
  line-height: 0.9;
  color: hsl(var(--foreground));
}

.cc-404__msg {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: hsl(var(--muted-foreground));
  margin: 1rem 0 1.5rem;
}

.cc-404__link {
  font-family: var(--font-body);
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-404__link:hover { color: hsl(var(--primary) / 0.8); }

/* ═══════════════════════ A11y / utilidades do shell ═══════════════════════ */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  font-family: var(--font-body);
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Trava o scroll com o overlay aberto */
body.cc-menu-open {
  overflow: hidden;
}

/* ═══════════════ Blog — toolbar, destaque, chips e estados ═══════════════
   Camada nova da experiência de blog (busca + filtros + ordenação + hero do
   post mais acessado). Só tokens: cream de fundo, laranja no acento, Lektorat
   nos títulos, PP Neue Montreal no corpo e o easing premium nas transições. */

/* ── Toolbar (form GET: busca, categoria, tag, ordenação) ── */

.cc-toolbar-wrap {
  max-width: 80rem;
  margin: 0 auto 2.5rem;
  padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
  .cc-toolbar-wrap { padding-inline: 2.5rem; }
}

.cc-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.25rem;
  background-color: hsl(var(--card) / 0.6);
  border: 1px solid hsl(var(--foreground) / 0.08);
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .cc-toolbar {
    grid-template-columns: minmax(12rem, 1.6fr) repeat(3, minmax(8rem, 1fr)) auto;
    align-items: end;
    gap: 1.25rem;
    padding: 1.5rem;
  }
}

.cc-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.cc-toolbar__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}

.cc-toolbar__input,
.cc-toolbar__select {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.2;
  color: hsl(var(--foreground));
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--foreground) / 0.15);
  border-radius: 0.25rem;
  transition: border-color 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
  -webkit-appearance: none;
  appearance: none;
}

/* Seta própria (appearance:none tira a nativa) — SVG inline, sem asset extra. */
.cc-toolbar__select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

.cc-toolbar__input:hover,
.cc-toolbar__select:hover { border-color: hsl(var(--foreground) / 0.3); }

.cc-toolbar__input:focus-visible,
.cc-toolbar__select:focus-visible {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25);
}

.cc-toolbar__input::placeholder { color: hsl(var(--muted-foreground)); }

.cc-toolbar__actions { display: flex; }

.cc-toolbar__submit {
  width: 100%;
  padding: 0.8125rem 1.75rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--background));
  background-color: hsl(var(--foreground));
  border: 1px solid hsl(var(--foreground));
  border-radius: 0.25rem;
  transition: all 0.4s var(--ease-premium);
}

.cc-toolbar__submit:hover {
  background-color: transparent;
  color: hsl(var(--foreground));
}

.cc-toolbar__submit:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.cc-toolbar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cc-toolbar__count {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}

.cc-toolbar__clear {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-toolbar__clear:hover { color: hsl(var(--primary) / 0.75); }

.cc-toolbar__clear:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

/* ── Destaque (hero da listagem) ── */

.cc-featured-wrap {
  max-width: 80rem;
  margin: 0 auto 3rem;
  padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
  .cc-featured-wrap { padding-inline: 2.5rem; }
}

.cc-featured {
  display: grid;
  grid-template-columns: 1fr;
  background-color: hsl(var(--card));
  border-radius: 0.5rem;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s var(--ease-premium);
}

.cc-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -20px rgb(0 0 0 / 0.28);
}

@media (min-width: 900px) {
  .cc-featured { grid-template-columns: 1.15fr 1fr; }
}

.cc-featured__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: hsl(var(--muted));
}

@media (min-width: 900px) {
  .cc-featured__media { aspect-ratio: auto; height: 100%; min-height: 22rem; }
}

.cc-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-premium);
}

.cc-featured:hover .cc-featured__media img { transform: scale(1.04); }

.cc-featured__media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 14rem;
  font-family: var(--font-display);
  font-size: 4rem;
  color: hsl(var(--foreground) / 0.15);
}

.cc-featured__body {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

@media (min-width: 900px) {
  .cc-featured__body { padding: 3rem; justify-content: center; }
}

.cc-featured__kicker {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.125rem;
  color: hsl(var(--primary));
  margin-bottom: 0.75rem;
}

.cc-featured__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cc-featured__date {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}

.cc-featured__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  color: hsl(var(--card-foreground));
  margin-bottom: 1rem;
}

.cc-featured__title a { color: inherit; transition: color 0.3s ease; }
.cc-featured__title a:hover { color: hsl(var(--primary)); }

.cc-featured__excerpt {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}

.cc-featured__more {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(var(--primary));
}

.cc-featured__more:hover { text-decoration: underline; }

.cc-featured__title a:focus-visible,
.cc-featured__more:focus-visible,
.cc-card__title a:focus-visible,
.cc-card__more:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

/* ── Chips de taxonomia (destaque, single) ── */

.cc-chip {
  display: inline-block;
  padding: 0.3125rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 999px;
  transition: all 0.3s var(--ease-premium);
}

.cc-chip:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.cc-chip:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Categoria dentro da linha de meta do card */
.cc-card__cat { color: hsl(var(--primary)); }
.cc-card__sep { margin-inline: 0.375rem; }

/* ── Estado vazio ── */

.cc-blog__empty {
  max-width: 80rem;
  margin-inline: auto;
  padding: 3rem 1.5rem;
  text-align: center;
}

.cc-blog__empty-title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  text-transform: uppercase;
  color: hsl(var(--foreground));
}

.cc-blog__empty-hint {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.75rem;
}

.cc-blog__empty-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Paginação: centralizada e com foco visível ── */

.cc-pagination { flex-wrap: wrap; justify-content: center; }

.cc-pagination .page-numbers:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* ── Single: categoria no topo, tags no pé ── */

.cc-post__cat { color: hsl(var(--primary)); }
.cc-post__cat:hover { text-decoration: underline; }
.cc-post__sep { margin-inline: 0.375rem; }

.cc-post__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 45rem;
  margin: 2.5rem auto 0;
  padding-inline: 1.5rem;
}