/* =====================================================================
   ASSINATURA CMY GYNJET — cmy-signature.css  v1.0.0 (06/09/2026)
   Fonte canônica: gynjet-desde-2006/src/styles/cmy-signature.css
   Cópias idênticas nos temas filhos: loja-astra-child, reset-astra-child,
   assistencia-astra-child (assets/css/cmy-signature.css).
   Regra: só CSS/gradientes, acento decorativo — nunca substitui contraste,
   não colore texto corrido nem fundos inteiros. Azul GYNJET continua a base.
   ===================================================================== */
:root {
  --cmy-c: #00AEEF;
  --cmy-m: #EC008C;
  --cmy-y: #FFF100;
  --cmy-h: linear-gradient(90deg, var(--cmy-c) 0 33.33%, var(--cmy-m) 33.33% 66.66%, var(--cmy-y) 66.66% 100%);
  --cmy-v: linear-gradient(180deg, var(--cmy-c) 0 33.33%, var(--cmy-m) 33.33% 66.66%, var(--cmy-y) 66.66% 100%);
  --cmy-line-w: 56px;   /* fio de título */
  --cmy-line-h: 4px;
  --cmy-bar-w: 6px;     /* barra vertical dos boxes */
  --cmy-strip-h: 3px;   /* linha fina no topo de faixas */
  --cmy-box-bg: #EEF4FF;
  --cmy-box-bg-dark: rgba(255, 255, 255, .08);
  --cmy-ease: .28s ease;
}

/* 1) TÍTULOS — fio de 3 cores sob H1 de página/post e H2 de seção */
.cmy-title { position: relative; }
.cmy-title::after, .cmy-line {
  content: ""; display: block; width: var(--cmy-line-w); height: var(--cmy-line-h);
  border-radius: 2px; background: var(--cmy-h); margin: 12px 0 0;
}
.cmy-line { margin: 0; }
.cmy-title--center::after, .text-center .cmy-title::after, .cmy-line--center { margin-left: auto; margin-right: auto; }
.cmy-title--inline { padding-bottom: 12px; }
.cmy-title--inline::after { position: absolute; left: 0; bottom: 0; margin: 0; }

/* 2) BOXES DE DESTAQUE — barra vertical CMY de 6px à esquerda, fundo azul-claro suave */
.cmy-box { position: relative; background: var(--cmy-box-bg); border-left: 0; border-radius: 0 12px 12px 0; padding: 18px 22px 18px 26px; }
.cmy-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--cmy-bar-w); border-radius: 3px 0 0 3px; background: var(--cmy-v); }
.cmy-box--dark { background: var(--cmy-box-bg-dark); }

/* 3) CARDS — no hover a borda superior revela o fio CMY (transição suave) */
.cmy-card { position: relative; }
.cmy-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--cmy-line-h); z-index: 3;
  background: var(--cmy-h); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--cmy-ease); pointer-events: none;
}
.cmy-card:hover::before, .cmy-card:focus-within::before, .cmy-card.is-open::before { transform: scaleX(1); }
.cmy-card--clip { overflow: hidden; }
/* 3b) FAQ — item aberto ganha o fio lateral */
.cmy-faq-open { position: relative; }
.cmy-faq-open::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: var(--cmy-line-h); border-radius: 0 2px 2px 0; background: var(--cmy-v); }

/* 4) FAIXAS E SEPARADORES — linha fina de 3px no topo; separador curto centralizado */
.cmy-strip { position: relative; }
.cmy-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--cmy-strip-h); background: var(--cmy-h); z-index: 2; pointer-events: none; }
.cmy-divider { display: block; width: var(--cmy-line-w); height: var(--cmy-line-h); border-radius: 2px; background: var(--cmy-h); margin: 32px auto; }

/* 5) BOTÕES PRIMÁRIOS — no hover, sublinhado + glow CMY sutil (cor do botão não muda) */
.cmy-btn { position: relative; isolation: isolate; }
.cmy-btn::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 2px;
  background: var(--cmy-h); opacity: 0; transform: scaleX(.6); transform-origin: center;
  transition: opacity var(--cmy-ease), transform var(--cmy-ease); pointer-events: none;
}
.cmy-btn:hover::after, .cmy-btn:focus-visible::after { opacity: 1; transform: scaleX(1); }
.cmy-btn:hover, .cmy-btn:focus-visible { box-shadow: 0 8px 22px -8px rgba(0, 174, 239, .55), 0 8px 22px -8px rgba(236, 0, 140, .45) !important; }

/* 6) BADGES E PASTILHAS — uma das 3 cores alternadas (tons com contraste AA para texto) */
.cmy-badge--c { background: #DFF5FF; color: #075985; }
.cmy-badge--m { background: #FDE4F2; color: #9D174D; }
.cmy-badge--y { background: #FFFBCC; color: #713F12; }
.cmy-dot--c { background: var(--cmy-c); color: #062A3F; }
.cmy-dot--m { background: var(--cmy-m); color: #FFFFFF; }
.cmy-dot--y { background: var(--cmy-y); color: #3F3A00; }
.cmy-alt > :nth-child(3n+1) .cmy-dot { background: var(--cmy-c); color: #062A3F; }
.cmy-alt > :nth-child(3n+2) .cmy-dot { background: var(--cmy-m); color: #FFFFFF; }
.cmy-alt > :nth-child(3n+3) .cmy-dot { background: var(--cmy-y); color: #3F3A00; }

@media (prefers-reduced-motion: reduce) {
  .cmy-card::before, .cmy-btn::after, .cmy-btn { transition: none !important; }
}