/* O card 4:1 dos módulos pagos.
 *
 * Aparece nos dois lados do login — index.html e a landing usam numa.css,
 * planos.html e modulos.html usam vy-core.css —, e as duas folhas têm paletas
 * diferentes. Por isso este componente não depende de token nenhum: o degradê
 * violeta é fixo porque é o mesmo violeta do fundo da foto, e o texto é branco
 * sobre ele nos dois temas. O que muda de claro para escuro é só a moldura.
 *
 * A foto é um recorte de mod-recepcao-b (scripts/_recorta-arte.js) já quase
 * quadrado, para caber inteira na altura do card sem cortar a cabeça. A borda
 * esquerda dela some numa máscara, então o violeta da foto se emenda no violeta
 * do CSS sem costura visível.
 */

.mc{
  position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:clamp(.8rem, 2.2vw, 2rem);
  aspect-ratio:4/1; min-height:190px;
  padding:clamp(1rem, 2.4vw, 1.9rem);
  padding-right:min(34%, 380px);
  border-radius:16px; overflow:hidden;
  background:linear-gradient(100deg, #4327B8 0%, #5A3EE8 52%, #7358FF 100%);
  color:#fff; text-decoration:none; isolation:isolate;
  box-shadow:0 2px 4px rgba(23,23,28,.05), 0 22px 48px -26px rgba(75,49,196,.55);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"] .mc{
  box-shadow:0 0 0 1px rgba(255,255,255,.11), 0 22px 48px -28px rgba(0,0,0,.8);
}
/* O card também é um <a>, e o vy-core tem `body.vy-app a{color:accent}` — a
   armadilha que a seção 21 daquela folha já documenta. Só que ali ela é contada
   errado: `body.vy-app a` é (0,1,2), não (0,1,1), então nem `a.mc` a vence. O
   `:any-link` sobe para (0,2,1) — e classe pesa antes de elemento — sem citar
   `body.vy-app`, que não existe do lado de fora do login. */
a.mc:any-link{ color:#fff }
a.mc:hover{ transform:translateY(-2px); box-shadow:0 4px 8px rgba(23,23,28,.06), 0 30px 60px -26px rgba(75,49,196,.6) }
:root[data-theme="dark"] a.mc:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 30px 60px -28px rgba(0,0,0,.85) }
.mc:focus-visible{ outline:2px solid #fff; outline-offset:3px }

/* um brilho frio no canto de cima à esquerda, para o degradê não ficar chapado */
.mc::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 150% at 4% -20%, rgba(255,255,255,.20), transparent 55%);
}

.mc-txt{ position:relative; z-index:2; min-width:0 }

.mc-eyebrow{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:.35rem;
}
.mc-titulo{
  margin:0; font-size:clamp(1.15rem, 2.1vw, 1.65rem); font-weight:700;
  line-height:1.15; letter-spacing:-.01em; color:#fff; text-wrap:balance;
}
.mc-desc{
  margin:.4rem 0 0; font-size:clamp(.86rem, 1.15vw, .98rem); line-height:1.45;
  color:rgba(255,255,255,.82); max-width:34ch;
}

.mc-pontos{
  position:relative; z-index:2; margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.84rem; color:rgba(255,255,255,.88); white-space:nowrap;
}
.mc-pontos li{ position:relative; padding-left:1rem }
.mc-pontos li::before{
  content:""; position:absolute; left:.15rem; top:.52em; width:5px; height:5px;
  border-radius:50%; background:rgba(255,255,255,.55);
}

.mc-acao{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:.4rem;
}
.mc-preco{ font-size:.76rem; color:rgba(255,255,255,.75); white-space:nowrap }

.mc-cta{
  position:relative; z-index:2; flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.62rem 1.15rem; border-radius:8px;
  background:#fff; color:#4B31C4; font-weight:700; font-size:.9rem;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
  transition:background .18s ease;
}
a.mc:hover .mc-cta{ background:#F2EEFF }

.mc-foto{
  position:absolute; z-index:1; right:0; bottom:0; height:100%; width:auto;
  object-fit:cover; object-position:center bottom; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 58%);
          mask-image:linear-gradient(to right, transparent 0, #000 58%);
}

/* selo de comprado — some o botão, entra a marca de que já é da casa */
.mc-selo{
  position:relative; z-index:2; flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:.82rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ---- tamanho grande: o herói da landing e a faixa do index ---- */
.mc-lg{ min-height:250px; border-radius:20px }
.mc-lg .mc-titulo{ font-size:clamp(1.4rem, 3vw, 2.35rem) }
.mc-lg .mc-desc{ font-size:clamp(.92rem, 1.35vw, 1.1rem) }
.mc-lg .mc-cta{ padding:.75rem 1.5rem; font-size:1rem }

/* ---- tamanho pequeno: a lista de módulos à venda ----
   Sem proporção 4:1: numa coluna larga ela viraria a mesma altura do
   médio e o "pequeno" não seria pequeno. Aqui a altura é fixa e a foto,
   que acompanha a altura, encolhe junto. */
.mc-sm{ aspect-ratio:auto; min-height:0; height:136px; padding-right:170px;
        border-radius:12px }
.mc-sm .mc-pontos{ display:none }
.mc-sm .mc-titulo{ font-size:clamp(1rem, 1.6vw, 1.25rem) }
.mc-sm .mc-desc{ font-size:.85rem }

/* as bolinhas somem antes do card, senão espremem o título */
@media (max-width:1000px){
  .mc-pontos{ display:none }
}

/* No celular o card deixa de ter proporção fixa e cresce com o texto.
   A foto continua à direita, só que mais estreita: ela é um retrato quase
   quadrado, e virar faixa no topo mostraria uma fatia com o rosto e nada
   mais — nem os braços cruzados, que são metade do recado da imagem. */
@media (max-width:720px){
  .mc, .mc-lg, .mc-sm{
    aspect-ratio:auto; height:auto; min-height:168px;
    grid-template-columns:minmax(0,1fr);
    padding:1rem; padding-right:42%; row-gap:.85rem; border-radius:14px;
  }
  .mc-titulo, .mc-lg .mc-titulo, .mc-sm .mc-titulo{ font-size:1.05rem }
  .mc-desc, .mc-lg .mc-desc{ font-size:.84rem; max-width:none }
  .mc-acao{ align-items:flex-start }
  .mc-cta, .mc-lg .mc-cta{ padding:.55rem 1rem; font-size:.88rem }
  .mc-foto{
    width:38%; height:100%; object-position:50% 50%;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 34%);
            mask-image:linear-gradient(to right, transparent 0, #000 34%);
  }
}

@media (prefers-reduced-motion:reduce){
  .mc, .mc-cta{ transition:none }
  a.mc:hover{ transform:none }
}

/* ================================================================
   A faixa "Ideal para …", logo abaixo do card.

   Ela vive fora do retângulo violeta, sobre o fundo da página — e a
   página é numa.css de um lado do login e vy-core.css do outro. Como
   esta folha não pode depender de token nenhum, cada cor está escrita
   duas vezes, claro e escuro, no mesmo padrão que o card já usa. O
   sinal de escuro é só `data-theme`: não existe prefers-color-scheme
   em lugar nenhum deste site, o tema é carimbado no <head>.
   ================================================================ */

.mc-bloco{ display:flex; flex-direction:column; gap:.7rem }

.mc-ideal{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:.35rem .7rem; padding:0 .2rem;
}
.mc-ideal-rot{
  flex:0 0 auto;
  font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#7A7488;
}
:root[data-theme="dark"] .mc-ideal-rot{ color:rgba(255,255,255,.5) }

.mc-ramos{
  display:flex; flex-wrap:wrap; gap:.35rem;
  margin:0; padding:0; list-style:none; min-width:0;
}
.mc-ramo{
  display:inline-flex; align-items:center;
  padding:.22rem .62rem; border-radius:999px;
  font-size:.79rem; line-height:1.35; white-space:nowrap;
  background:rgba(75,49,196,.07); color:#4B31C4;
  box-shadow:inset 0 0 0 1px rgba(75,49,196,.15);
}
:root[data-theme="dark"] .mc-ramo{
  background:rgba(140,116,255,.15); color:#CBBEFF;
  box-shadow:inset 0 0 0 1px rgba(160,140,255,.24);
}

/* Debaixo do card grande a faixa acompanha o peso do herói. */
.mc-ideal-lg{ gap:.4rem .8rem }
.mc-ideal-lg .mc-ramo{ font-size:.84rem; padding:.3rem .75rem }

/* ---- combo sem arte ----
   Só a Recepção tem foto. Nos outros o padding reservado para ela deixaria
   um terço do card vazio, então ele é devolvido ao texto — e a descrição,
   que era estreita para não invadir a imagem, pode respirar. */
.mc-sem-foto{
  padding-right:clamp(1rem, 2.4vw, 1.9rem);
  /* Sem a foto para ocupá-la, a proporção 4:1 vira faixa oca: a altura passa a
     ser a do conteúdo, com um piso que mantém o card com cara de card. */
  aspect-ratio:auto; min-height:176px;
  /* E o texto deixa de ser coluna elástica. Com 1fr no texto toda a sobra fica
     entre ele e as bolinhas, que vão parar na outra ponta do card; com a sobra
     na coluna do meio elas encostam no texto e o botão continua na ponta. */
  grid-template-columns:auto minmax(0,1fr) auto;
}
.mc-sem-foto .mc-txt{ max-width:46ch }
.mc-sem-foto .mc-desc{ max-width:46ch }

/* Quando as bolinhas somem, some junto a coluna delas — senão a sobra fica no
   meio e o botão desencosta da borda direita. */
@media (max-width:1000px){
  .mc-sem-foto{ grid-template-columns:minmax(0,1fr) auto }
}
.mc-sem-foto::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-8%; top:-40%; width:46%; height:180%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.13), transparent 70%);
}
.mc-sm.mc-sem-foto{
  padding-right:clamp(1rem, 2.4vw, 1.9rem);
  min-height:0; grid-template-columns:minmax(0,1fr) auto;
}

/* ---- em breve ----
   Deixa de ser link e passa a ser um cartaz. O violeta perde saturação para
   não competir com o que já está à venda ao lado. */
.mc-breve{
  background:linear-gradient(100deg, #4E4967 0%, #5C5680 52%, #706898 100%);
  box-shadow:0 2px 4px rgba(23,23,28,.05), 0 18px 40px -28px rgba(40,36,64,.6);
}
.mc-selo-breve{ background:rgba(255,255,255,.12) }

/* capacidade: o número que virou a unidade da casa */
.mc-cap{
  font-size:.72rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  color:rgba(255,255,255,.9);
  padding:.16rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.14);
}

@media (max-width:720px){
  .mc-sem-foto, .mc-sm.mc-sem-foto{ padding-right:1rem }
  .mc-sem-foto{ grid-template-columns:minmax(0,1fr); min-height:168px }
  .mc-ideal{ gap:.3rem .5rem }
  .mc-ramo, .mc-ideal-lg .mc-ramo{ font-size:.75rem; padding:.2rem .55rem }
}