/* ===== ArqBase — Como fazer Consultoria de Interiores =====
   Carregado depois de curso.css: paleta terracota (sobrescreve os tokens) e
   só as seções que não existem lá. */
body.consultoria-de-interiores {
  --azul: #B95712;          /* cor de destaque desta página (terracota) */
  --azul-claro: #FCEFE4;
  --vermelho: #C0392B;
  --escuro: #0B0B22;
}

/* Seções escuras: trocam os tokens no próprio escopo */
.escuro { background: var(--escuro); color: #FFFFFF; --texto: #FFFFFF; --texto-2: #EDEDF2; --texto-suave: #C9CBD8; --texto-apagado: #A6A8B0; --azul: #F5B27E; --branco: #14161E; --borda: rgba(255,255,255,0.1); --creme-escuro: rgba(255,255,255,0.08); }

/* Textos que a prancheta mobile encurta */
.so-mob { display: none; }

/* ===== Hero ===== */
.hero__tag { flex-wrap: wrap; }
.pill { display: inline-block; background: var(--azul-claro); color: var(--azul); font-size: 11px; letter-spacing: 1.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; text-transform: uppercase; }

/* ===== Blocos genéricos ===== */
.secao { padding: 64px var(--recuo); }
.secao--colada { padding-top: 0; }
.secao__cabecalho { text-align: center; margin-bottom: 32px; }
.secao__cabecalho h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 14px; }
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: 20px; padding: 44px 48px; }
.problema h2 span, .modelo h2 span, .pratica h2 span, .oferta__nome span { color: var(--azul); }
.lista { display: grid; gap: 6px; }
.lista li { font-size: 15px; color: var(--texto-2); }
.lista li::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.08em; background-color: currentColor; -webkit-mask: var(--check) no-repeat center / contain; mask: var(--check) no-repeat center / contain; color: var(--azul); font-weight: 700; margin-right: 8px; }
.lista--x li::before { content: "✕"; color: var(--vermelho); }
.lista--linhas { gap: 0; }
.lista--linhas li { font-size: 14px; line-height: 1.6; padding: 4px 0; border-top: 1px solid var(--creme-escuro); }

/* ===== Problema (depender só de projeto grande) ===== */
.problema__grid { display: grid; grid-template-columns: 1fr 420px; gap: 44px; align-items: center; }
.problema h2 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; margin-bottom: 14px; }
.problema .lista { margin-bottom: 14px; }
.problema p { font-size: 15px; line-height: 1.7; color: var(--texto-suave); }
.problema p + p { margin-top: 10px; }
.problema__forte { color: var(--texto); font-weight: 600; }
.problema__grid img { border-radius: 12px; }

/* ===== Modelo (consultoria online) ===== */
.modelo__grid { display: grid; grid-template-columns: 1fr 440px; gap: 48px; align-items: center; }
.modelo h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
.modelo p { font-size: 15px; line-height: 1.7; color: var(--texto-suave); }
.modelo .lista { gap: 7px; margin: 12px 0 14px; }
.modelo strong { color: var(--texto); }
.modelo__grid img { border-radius: 14px; }

/* ===== Cronograma ===== */
.cronograma__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cronograma__grid li { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 22px 26px; }
.cronograma h3 { font-family: var(--sans); font-size: 16px; font-weight: 700; }
.cronograma h3::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.08em; background-color: currentColor; -webkit-mask: var(--check) no-repeat center / contain; mask: var(--check) no-repeat center / contain; color: var(--azul); margin-right: 8px; }
.cronograma p { font-size: 14px; line-height: 1.6; color: var(--texto-suave); margin-top: 6px; }

/* ===== Aprenda na prática (animações) ===== */
.pratica h2 { text-align: center; font-size: clamp(22px, 2.8vw, 32px); margin-bottom: 36px; }
.pratica__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pratica figure { margin: 0; background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; }
.pratica img { width: 100%; background: #FFFFFF; }
.pratica figcaption { padding: 18px 22px; text-align: center; font-size: 16px; font-weight: 600; }

/* ===== Material incluso (mockups) ===== */
.kit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kit__grid li { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; text-align: center; }
.kit__grid img { width: 64%; margin: 0 auto 10px; }
.kit__ext { display: inline-block; font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: var(--azul); background: var(--azul-claro); padding: 3px 9px; border-radius: 6px; }
.kit h3 { font-family: var(--sans); font-size: 14px; font-weight: 600; margin-top: 6px; }

/* ===== Cartões de destaque (precificação e bônus) =====
   No desktop a imagem fica à esquerda ocupando as duas linhas; no mobile ela entra
   entre o título e o texto, como na prancheta. */
.destaque-card { display: grid; grid-template-columns: 440px 1fr; grid-template-areas: "img cab" "img corpo"; column-gap: 44px; align-items: center; }
.destaque-card--bonus { grid-template-columns: 380px 1fr; }
.destaque-card img { grid-area: img; }
.destaque-card__cab { grid-area: cab; align-self: end; }
.destaque-card__corpo { grid-area: corpo; align-self: start; }
.destaque-card h2 { font-size: clamp(20px, 2.4vw, 28px); margin: 12px 0; }
.destaque-card p { font-size: 15px; line-height: 1.7; color: var(--texto-suave); }
.destaque-card p + p { margin-top: 10px; }
.destaque-card strong { color: var(--texto); }
.destaque-card .lista { margin-top: 12px; }

/* ===== Depoimentos (escuro, 2 colunas) ===== */
.depoimentos.escuro { padding: 64px var(--recuo); }
.escuro .depoimentos__sub { color: var(--texto-apagado); margin-bottom: 32px; }
.escuro .mosaico { columns: 2; column-gap: 14px; max-width: 900px; }
.escuro .mosaico img { border-radius: 10px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(0,0,0,0.4); }

/* ===== Oferta ===== */
body.consultoria-de-interiores .oferta { padding-top: 64px; }
.oferta__lista .pill { margin-bottom: 16px; }
.oferta__lista .oferta__nome { font-size: 24px; line-height: 1.35; margin-bottom: 14px; }
body.consultoria-de-interiores .oferta__pagamentos { width: 82%; margin-top: 18px; }

/* ===== Garantia em cartão ===== */
.garantia__card { display: flex; gap: 24px; align-items: center; text-align: left; max-width: 926px; margin: 0 auto; background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; padding: 28px 32px; line-height: normal; }
body.consultoria-de-interiores .garantia img { width: 96px; margin: 0; flex-shrink: 0; }
body.consultoria-de-interiores .garantia h3 { font-size: 20px; margin: 0 0 6px; }
body.consultoria-de-interiores .garantia p { font-size: 14px; line-height: 1.6; margin: 0; max-width: none; }

/* ===== Professor ===== */
body.consultoria-de-interiores .professor img { border-radius: 16px; }

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
  .secao, .depoimentos.escuro { padding-left: 40px; padding-right: 40px; }
  .cartao { padding: 32px; }
  .problema__grid { grid-template-columns: 1fr 340px; gap: 32px; }
  .modelo__grid { grid-template-columns: 1fr 360px; gap: 32px; }
  .destaque-card { grid-template-columns: 320px 1fr; column-gap: 28px; }
  .destaque-card--bonus { grid-template-columns: 280px 1fr; }
  .pratica__grid { gap: 14px; }
}

@media (max-width: 900px) {
  .problema__grid, .modelo__grid { grid-template-columns: 1fr; gap: 16px; }
  .modelo h2 { text-align: center; }
  .pratica__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .kit__grid { grid-template-columns: repeat(2, 1fr); }
  .destaque-card, .destaque-card--bonus { grid-template-columns: 1fr; grid-template-areas: "cab" "img" "corpo"; column-gap: 0; }
  .destaque-card img { margin-bottom: 10px; }
  .destaque-card--bonus img { width: 72%; margin: 0 auto 12px; }
  .garantia__card { flex-direction: column; text-align: center; gap: 10px; }
}

@media (max-width: 640px) {
  .so-desk { display: none; }
  .so-mob { display: inline; }
  .hero__tag { gap: 10px; }
  .hero__tag .rotulo { font-size: 10.5px; letter-spacing: 2px; }
  .pill { font-size: 9.5px; letter-spacing: 1px; padding: 4px 9px; }
  .secao, .secao--colada { padding: 36px 24px 0; }
  .secao.escuro { padding: 36px 24px; margin-top: 36px; }
  .secao__cabecalho { margin-bottom: 14px; }
  .secao__cabecalho h2 { font-size: 22px; margin-top: 10px; }
  .cartao { padding: 22px; border-radius: 14px; }
  .lista li { font-size: 13px; }
  .lista--linhas li { line-height: 1.55; }
  .problema h2 { font-size: 19px; line-height: 1.45; margin-bottom: 10px; }
  .problema p { font-size: 13px; line-height: 1.65; }
  .problema__grid { gap: 14px; }
  .problema__grid img { border-radius: 10px; }
  .modelo h2 { font-size: 21px; margin-bottom: 12px; }
  .modelo p { font-size: 13px; line-height: 1.65; }
  .modelo .lista li { font-size: 13.5px; }
  .modelo__grid img { border-radius: 12px; }
  .cronograma__grid { grid-template-columns: 1fr; gap: 12px; }
  .cronograma__grid li { padding: 16px 18px; border-radius: 12px; }
  .cronograma h3 { font-size: 14px; }
  .cronograma p { font-size: 12.5px; margin-top: 4px; }
  .pratica h2 { font-size: 22px; margin-bottom: 16px; }
  .pratica figure { border-radius: 14px; }
  .pratica figcaption { padding: 14px 18px; font-size: 14px; }
  .kit__grid { gap: 10px; }
  .kit__grid li { padding: 14px; border-radius: 12px; }
  .kit__grid img { width: 66%; margin-bottom: 8px; }
  .kit__ext { font-size: 9px; letter-spacing: 1px; padding: 2px 7px; }
  .kit h3 { font-size: 12px; line-height: 1.35; margin-top: 5px; }
  .destaque-card h2 { font-size: 20px; margin: 10px 0; }
  .destaque-card p { font-size: 13px; line-height: 1.65; }
  .destaque-card p + p { margin-top: 8px; }
  .depoimentos.escuro { padding: 36px 24px; margin-top: 36px; }
  .escuro .depoimentos__sub { font-size: 13px; margin-bottom: 16px; }
  .escuro .mosaico { columns: auto; display: grid; gap: 12px; }
  .escuro .mosaico img { margin-bottom: 0; border-radius: 8px; }
  body.consultoria-de-interiores .oferta { padding: 40px 24px 44px; }
  .oferta__lista .oferta__nome { font-size: 19px; margin-bottom: 10px; }
  body.consultoria-de-interiores .oferta__pagamentos { width: 88%; margin-top: 14px; }
  body.consultoria-de-interiores .garantia { padding: 28px 24px 0; }
  .garantia__card { display: block; padding: 20px; border-radius: 14px; gap: 0; }
  body.consultoria-de-interiores .garantia img { width: 80px; margin: 0 auto; }
  body.consultoria-de-interiores .garantia h3 { font-size: 17px; margin: 14px 0 6px; }
  body.consultoria-de-interiores .garantia p { font-size: 12.5px; }
  body.consultoria-de-interiores .professor img { width: 150px; }
}

/* h1 do herói — valores do design (desktop 46px / mobile 30px) */
body.consultoria-de-interiores .hero h1 { font-size: clamp(30px, calc(30px + 16 * (100vw - 375px) / 865), 46px); line-height: 1.15; letter-spacing: -0.5px; margin-top: 16px; }
@media (max-width: 640px) {
  body.consultoria-de-interiores .hero h1 { line-height: 1.2; letter-spacing: normal; margin-top: 14px; }
}