/* Página da série Reformando minha casa. Tokens vêm de site.css. */
.capa-reforma { padding: clamp(2rem, 6vw, 5rem) 0 calc(var(--secao) + 1rem); }
.capa-reforma__grade { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .capa-reforma__grade { grid-template-columns: 1fr 1fr; } }
.capa-reforma h1 { font-size: clamp(3rem, 1rem + 7.5vw, 8.4rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 300; }
.capa-reforma h1 .tira { --giro: -2deg; margin-left: 0.25em; }
.capa-reforma .lead { margin: 2rem 0; }
.capa-reforma__numeros { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.capa-reforma__numeros strong { display: block; font: 300 var(--t-numero)/1 var(--serif); font-variant-numeric: tabular-nums; }
.capa-reforma__numeros span { font-size: 0.85rem; color: var(--tinta-2); }
.para-marca { color: var(--tinta); }
.para-marca b { color: var(--terracota); font-weight: 600; }

/* a colagem da obra */
.obra { position: relative; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 1 / 1.05; }
.obra > *, .obra > .fitado { position: absolute; }
.obra__planta {
  top: 4%; left: 4%; width: 84%; padding: 4%;
  background-color: #dfe6ea; color: #2f4c66;
  background-image: linear-gradient(rgba(47, 76, 102, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 76, 102, 0.14) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: var(--sombra-papel); transform: rotate(-4deg);
}
.obra__planta svg { display: block; width: 100%; height: auto; }
.obra__eu { bottom: 0; right: 0; width: 66%; }
.obra__amostras { left: 0; bottom: 6%; display: flex; gap: 0.5rem; }
.obra__trena { left: 8%; bottom: 0; width: 70%; transform: rotate(4deg); }
.obra__etiqueta { top: 52%; left: 2%; --giro: -5deg; }
@media (max-width: 520px) {
  .obra__amostras .amostra { width: 58px; }
  .obra__amostras .amostra i { height: 52px; }
}

.duas { display: grid; gap: 2rem 4rem; }
@media (min-width: 900px) { .duas { grid-template-columns: 1fr 1.2fr; } }
.etapas { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: etapa; }
.etapas li { position: relative; padding: 1.25rem 0 1.25rem 3rem; border-top: 1px solid var(--linha); color: var(--tinta-2); counter-increment: etapa; }
.etapas li::before { content: counter(etapa); position: absolute; left: 0; top: 1.1rem; font: 300 1.8rem/1 var(--serif); color: var(--terracota); }
.etapas b { display: block; color: var(--tinta); font: 400 1.3rem/1.3 var(--serif); margin-bottom: 0.25rem; }

/* Cases no fundo escuro */
.cases-escuros .case { border-color: rgba(244, 238, 230, 0.16); }
.cases-escuros .case p, .cases-escuros .case__numeros span { color: rgba(244, 238, 230, 0.72); }
.cases-escuros .case__marca { color: rgba(244, 238, 230, 0.55); }
.cases-escuros .case__marca b, .cases-escuros .case__numeros .destaque strong { color: var(--rosa); }

/* ------------------------------------------------ episódios */
.episodios { list-style: none; padding: 0; margin: 3.5rem 0 0; display: grid; gap: 1.5rem 1.1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .episodios { grid-template-columns: repeat(5, 1fr); gap: 2rem 1.25rem; } }
.episodio {
  position: relative; background: var(--papel-claro); padding: 1.1rem 1rem 1.25rem; min-height: 150px;
  box-shadow: var(--sombra-papel); rotate: var(--giro);
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem;
  transition: rotate var(--normal) var(--saida), scale var(--normal) var(--saida);
}
.episodio:hover { rotate: 0deg; scale: 1.03; }
.episodio--rosa { background: var(--rosa); }
.episodio--mostarda { background: var(--mostarda); }
.episodio__n { font: 800 0.68rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracota); }
.episodio--mostarda .episodio__n { color: var(--tinta); }
.episodio h3 { font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); line-height: 1.05; }
.episodio p { margin: 0; font-size: 0.82rem; color: var(--tinta-2); }
.episodio--escolhido { outline: 3px solid var(--terracota); outline-offset: 5px; }
.episodio--escolhido::after { content: "o seu"; position: absolute; top: -12px; right: -8px; background: var(--terracota); color: var(--papel-claro); font: 800 0.62rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.55rem; rotate: 6deg; }

/* ------------------------------------------------ entrega */
.entregas { display: grid; gap: 2.5rem 2rem; margin-top: 3.5rem; }
@media (min-width: 900px) { .entregas { grid-template-columns: repeat(3, 1fr); } }
.entrega { display: flex; gap: 1.5rem; align-items: flex-start; }
.entrega strong { font: 300 clamp(5rem, 3rem + 6vw, 9rem)/0.8 var(--serif); color: var(--terracota); }
.entrega h3 { margin-bottom: 0.75rem; }
.entrega p { margin: 0; color: var(--tinta-2); }
.nota { margin: 1.5rem 0 0; color: rgba(244, 238, 230, 0.7); font-size: 0.95rem; }

/* ------------------------------------------------ passos */
.passos { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 2rem; }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(4, 1fr); } }
.passos li { border-top: 1px solid var(--linha-forte); padding-top: 1.25rem; }
.passos span { font-size: 0.8rem; color: var(--terracota); font-weight: 600; }
.passos h3 { font-size: 1.4rem; margin: 0.5rem 0; }
.passos p { margin: 0; color: var(--tinta-2); font-size: 0.95rem; }


.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }