/* Kit de design dos sites (Fase 9): componentes prontos que a IA combina para
   montar as páginas. Tudo usa as variáveis do tema (cores e fontes do cliente),
   definidas em templates/sites/shell.html. Sempre carregado, nunca "purgado":
   as páginas geradas ficam no banco, fora do que o Tailwind enxerga. */

.site { --kit-tinta: color-mix(in srgb, var(--cor-principal) 7%, var(--cor-fundo));
        --kit-borda: color-mix(in srgb, var(--cor-texto) 12%, transparent);
        --kit-suave: color-mix(in srgb, var(--cor-texto) 70%, var(--cor-fundo));
        line-height: 1.65; -webkit-font-smoothing: antialiased; }
.site h1, .site h2, .site h3, .site h4 { line-height: 1.2; color: inherit; }
.site p { margin: 0; }
.site p + p { margin-top: 1em; }

/* Seções */
.kit-secao { padding: 4rem 0; }
@media (min-width: 768px) { .kit-secao { padding: 6rem 0; } }
.kit-secao--compacta { padding: 2.5rem 0; }
.kit-secao--alt { background: var(--kit-tinta); }
.kit-secao--marca { background: var(--cor-principal); color: var(--cor-sobre-principal); }
.kit-secao--marca .kit-sobretitulo, .kit-secao--marca .kit-lead { color: inherit; opacity: .9; }
.kit-secao--escura { background: color-mix(in srgb, var(--cor-texto) 92%, #000); color: #F8FAFC; }
.kit-secao--escura .kit-lead { color: #CBD5E1; }
.kit-cabeca { max-width: 48rem; margin-bottom: 2.5rem; }
.kit-cabeca--centro { margin-left: auto; margin-right: auto; text-align: center; }
.kit-cabeca--centro .kit-lead { margin-left: auto; margin-right: auto; }

/* Textos */
.kit-sobretitulo { display: inline-block; margin-bottom: .75rem; font-size: .8125rem; font-weight: 700;
                   letter-spacing: .12em; text-transform: uppercase; color: var(--cor-principal); }
.kit-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
              letter-spacing: -.01em; }
.kit-titulo--grande { font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem); letter-spacing: -.02em; }
.kit-subtitulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.25rem; }
.kit-lead { margin-top: 1rem; max-width: 42rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--kit-suave); }
.kit-destaque-cor { color: var(--cor-principal); }
.kit-pequeno { font-size: .875rem; color: var(--kit-suave); }

/* Botões */
.kit-botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.kit-cabeca--centro .kit-botoes, .kit-hero--centro .kit-botoes { justify-content: center; }
.btn-principal, .btn-secundario, .btn-contorno { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-principal:hover, .btn-secundario:hover { filter: brightness(1.08); transform: translateY(-1px);
                                              box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--cor-principal) 60%, transparent); }
.btn-contorno { display: inline-block; padding: .6rem 1.2rem; border-radius: .375rem; font-weight: 600; text-decoration: none;
                border: 2px solid var(--cor-principal); color: var(--cor-principal); background: transparent; }
.btn-contorno:hover { background: var(--cor-principal); color: var(--cor-sobre-principal); }
.kit-secao--marca .btn-contorno { border-color: currentColor; color: inherit; }
.btn-grande { padding: .9rem 1.6rem; font-size: 1.0625rem; border-radius: .5rem; }

/* Abertura (hero) */
.kit-hero { position: relative; padding: 4.5rem 0; overflow: hidden;
            background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--cor-principal) 14%, transparent), transparent 60%),
                        linear-gradient(180deg, var(--kit-tinta), var(--cor-fundo)); }
@media (min-width: 768px) { .kit-hero { padding: 7rem 0; } }
.kit-hero--centro { text-align: center; }
.kit-hero--centro .kit-lead { margin-left: auto; margin-right: auto; }
.kit-hero--marca { background: linear-gradient(135deg, var(--cor-principal), color-mix(in srgb, var(--cor-principal) 70%, #000));
                   color: var(--cor-sobre-principal); }
.kit-hero--marca .kit-lead, .kit-hero--marca .kit-sobretitulo { color: inherit; opacity: .9; }
/* Abertura com foto do estúdio de imagens: {{imagem_fundo}} dentro de kit-hero--foto; sem a foto, a cor da marca */
.kit-hero--foto { color: #fff; background: linear-gradient(135deg, var(--cor-principal), color-mix(in srgb, var(--cor-principal) 60%, #000)); }
@media (min-width: 768px) { .kit-hero--foto { padding: 9rem 0; } }
.kit-hero--foto > .site-container { position: relative; z-index: 2; }
.kit-hero--foto .kit-lead, .kit-hero--foto .kit-sobretitulo { color: inherit; opacity: .92; }
.kit-hero--foto .kit-titulo { color: inherit; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
/* the outline button in the brand's color does not read on a photo or on the brand's color: white there */
.kit-hero--foto .btn-contorno, .kit-hero--marca .btn-contorno { border-color: #fff; color: #fff; }
.kit-hero--foto .btn-contorno:hover, .kit-hero--marca .btn-contorno:hover { background: #fff; color: var(--cor-principal); }
.kit-foto-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kit-foto-veu { position: absolute; inset: 0; z-index: 1;
                background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 60%, rgba(0, 0, 0, .12)); }
.kit-hero--centro.kit-hero--foto .kit-foto-veu { background: rgba(0, 0, 0, .45); }
.kit-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem;
            box-shadow: 0 25px 50px -20px rgba(15, 23, 42, .35); }
.kit-duas-colunas { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .kit-duas-colunas { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.kit-painel { background: var(--cor-fundo); color: var(--cor-texto); border: 1px solid var(--kit-borda); border-radius: 1.25rem;
              padding: 2rem; box-shadow: 0 25px 50px -20px rgba(15, 23, 42, .25); }

/* Grades e cartões */
.kit-grade { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .kit-grade--2, .kit-grade--3, .kit-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kit-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .kit-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kit-cartao { background: var(--cor-fundo); color: var(--cor-texto); border: 1px solid var(--kit-borda); border-radius: 1rem;
              padding: 1.75rem; transition: transform .2s ease, box-shadow .2s ease; }
.kit-cartao:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .3); }
.kit-cartao__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.125rem; margin: 1rem 0 .5rem; }
.kit-cartao p { color: var(--kit-suave); }
.kit-icone { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .875rem; font-size: 1.4rem;
             background: color-mix(in srgb, var(--cor-principal) 12%, var(--cor-fundo)); color: var(--cor-principal); }

/* Números de destaque */
.kit-numeros { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .kit-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kit-numero strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700;
                     color: var(--cor-principal); line-height: 1; }
.kit-numero span { display: block; margin-top: .5rem; color: var(--kit-suave); font-size: .9375rem; }
.kit-secao--marca .kit-numero strong, .kit-secao--marca .kit-numero span { color: inherit; }

/* Faixa de chamada */
.kit-faixa { display: grid; gap: 1.5rem; align-items: center; padding: 2.5rem; border-radius: 1.5rem;
             background: linear-gradient(135deg, var(--cor-principal), color-mix(in srgb, var(--cor-principal) 75%, var(--cor-secundaria)));
             color: var(--cor-sobre-principal); }
@media (min-width: 768px) { .kit-faixa { grid-template-columns: 1fr auto; padding: 3.5rem; } }
.kit-faixa .kit-lead { color: inherit; opacity: .9; }
.kit-faixa .btn-principal { background: var(--cor-sobre-principal); color: var(--cor-principal); }

/* Listas */
.kit-lista-check { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .75rem; }
.kit-lista-check li { position: relative; padding-left: 2rem; }
.kit-lista-check li::before { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; border-radius: 999px;
                              display: grid; place-items: center; font-size: .8rem; font-weight: 700;
                              background: color-mix(in srgb, var(--cor-principal) 15%, var(--cor-fundo)); color: var(--cor-principal); }
.kit-passos { list-style: none; padding: 0; margin: 0; counter-reset: passo; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .kit-passos { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.kit-passos li { counter-increment: passo; position: relative; padding-top: 3.5rem; }
.kit-passos li::before { content: counter(passo); position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px;
                         display: grid; place-items: center; font-weight: 700; background: var(--cor-principal); color: var(--cor-sobre-principal); }

/* Perguntas frequentes */
.kit-faq { border-top: 1px solid var(--kit-borda); }
.kit-faq details { border-bottom: 1px solid var(--kit-borda); padding: 1.25rem 0; }
.kit-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
                   font-weight: 600; font-size: 1.0625rem; }
.kit-faq summary::-webkit-details-marker { display: none; }
.kit-faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--cor-principal); transition: transform .2s ease; }
.kit-faq details[open] summary::after { transform: rotate(45deg); }
.kit-faq details > div { margin-top: .75rem; color: var(--kit-suave); }

/* Citação, imagem e ficha */
.kit-citacao { border-left: 4px solid var(--cor-principal); padding: .5rem 0 .5rem 1.5rem; font-size: 1.25rem;
               font-family: var(--fonte-titulo); }
.kit-imagem { width: 100%; border-radius: 1.25rem; object-fit: cover; aspect-ratio: 4 / 3; }
.kit-ficha { display: grid; gap: .25rem 2rem; margin: 0; }
@media (min-width: 640px) { .kit-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit-ficha div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--kit-borda); }
.kit-ficha dt { color: var(--kit-suave); }
.kit-ficha dd { margin: 0; font-weight: 600; text-align: right; }
.kit-preco { font-family: var(--fonte-titulo); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 700; color: var(--cor-principal); }
.kit-selo { display: inline-block; padding: .25rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 600;
            background: color-mix(in srgb, var(--cor-principal) 12%, var(--cor-fundo)); color: var(--cor-principal); }
.kit-divisor { height: 1px; border: 0; background: var(--kit-borda); margin: 3rem 0; }
.kit-caixa { background: var(--kit-tinta); border-radius: 1.25rem; padding: 2rem; }