/* Atlas Lab · linguagem "planta" nas páginas oferta e sessao (30/09/2026)
   Carrega DEPOIS de atlas-planta.css. Só regras destas duas páginas; o vocabulário
   comum (corte, cantoneira, rótulo mono, carimbo, piso do topo) vem de atlas-planta.css.
   Tons, na ordem das seções:
   oferta · topo escuro · processo escuro com a grade do piso · aprova claro · áreas
            claro · compromissos petróleo · FAQ claro · conversar escuro com piso
   sessao · topo escuro · pra quem escuro com a grade do piso · leva claro · como
            petróleo · formatos claro · o que não é claro · fecho escuro com piso
   [WILLIANS 07/10] só 3 fundos de seção: preto, claro #f6f8f8 e petróleo.
   Nada aqui usa radial-gradient. */

/* ===== Numeração de planta: 7 pranchas por página ===== */
.planta-oferta main > section::after,
.planta-oferta main > section.hero.escuro::after,
.planta-sessao main > section::after,
.planta-sessao main > section.hero.escuro::after {
  content: counter(prancha, decimal-leading-zero) "/07";
}
/* privacidade: 2 pranchas (topo + texto) */
.planta-privacidade main > section::after,
.planta-privacidade main > section.hero.escuro::after {
  content: counter(prancha, decimal-leading-zero) "/02";
}

/* ===== Emenda topo → 2ª seção: mesma geometria do piso (64 px, começando em -30%) =====
   Igual à emenda da home (#case): cada linha vertical do piso continua numa linha daqui. */
.planta-oferta #como.escuro,
.planta-sessao #pra-quem.escuro {
  background: var(--planta-escuro-2) !important;
  --cor-fundo: var(--planta-escuro-2);
  overflow: hidden;
}
.planta-oferta #como.escuro::before,
.planta-sessao #pra-quem.escuro::before {
  inset: 0 -30% 0 -30%;
  background-image:
    linear-gradient(90deg, rgba(95, 211, 222, .24) 1px, transparent 1px),
    linear-gradient(rgba(95, 211, 222, .24) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .45) 260px, rgba(0, 0, 0, .22) 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .45) 260px, rgba(0, 0, 0, .22) 100%);
}

/* ===== Cantoneiras nos cards destas páginas ===== */
.planta .ent-card, .planta .aprova-box, .planta .formato {
  border-radius: 2px;
  position: relative;
  --cant: #0b1113;
}
.planta .ent-card::after, .planta .aprova-box::after, .planta .formato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  --l: 14px; --t: 2px;
  background:
    linear-gradient(var(--cant), var(--cant)) left top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cant), var(--cant)) left top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--cant), var(--cant)) right top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cant), var(--cant)) right top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--cant), var(--cant)) left bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cant), var(--cant)) left bottom / var(--t) var(--l) no-repeat,
    linear-gradient(var(--cant), var(--cant)) right bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--cant), var(--cant)) right bottom / var(--t) var(--l) no-repeat;
}
/* a linha em gradiente no topo dos cards sai: a cantoneira faz esse papel (como na home) */
.planta .ent-card::before, .planta .formato::before { content: none; }
.planta .ent-card .ent-letter { border-radius: 2px; font-family: var(--planta-mono); }
.planta .formato .k { font-family: var(--planta-mono); font-weight: 500; letter-spacing: .1em; }
.planta .formato .lanc { border-radius: 2px; }

/* ===== OFERTA ===== */
/* processo no escuro: o número grande e a linha do tempo em mono de prancha */
.planta-oferta #como .step-mag .num-big { font-family: var(--planta-mono); font-weight: 500; }
.planta-oferta #como .prazo-eyebrow,
.planta-oferta #como .pz-week { font-family: var(--planta-mono); }

/* aprova: agora é seção clara própria depois de uma linha de corte, precisa de respiro em cima */
.planta-oferta #aprova { padding-top: var(--esp-6); }
@media (min-width: 860px) { .planta-oferta #aprova { padding-top: var(--esp-7); } }
.planta-oferta .aprova-box .eyebrow { display: flex; margin-bottom: var(--esp-3); }

/* compromissos em petróleo com grade milimetrada (tokens iguais ao processo da home) */
.planta.planta-oferta #princ.tom-petroleo {
  background: var(--planta-petroleo) !important;
  --cor-fundo: var(--planta-petroleo);
  --cor-superficie: #0b4b55;
  --cor-superficie-2: #0a444d;
  --cor-texto: #ffffff;
  --cor-texto-2: #dbe9eb;
  --cor-texto-sutil: #c6dcdf;
  --cor-petroleo: #b3f0f3;
  --cor-petroleo-hover: #d8f8f9;
  --cor-petroleo-tint: #0a3f47;
  --cor-borda: #2f7883;
  --cor-borda-forte: #8fc3ca;
  --grade-fina: rgba(255, 255, 255, .05);
  --grade-forte: rgba(255, 255, 255, .11);
}
.planta-oferta #princ .princ-row .roman { font-family: var(--planta-mono); }
/* destaque em degradê sobre o petróleo: mesmas paradas do nicho.css (o --grad-marca padrão
   fica em 4,28:1 e 4,44:1 contra #0e5a66 no título do celular) */
.planta.planta-oferta #princ.tom-petroleo h2 .cream-em,
.planta.planta-sessao #como.tom-petroleo h2 .em {
  background: linear-gradient(92deg, #7fe0e9 0%, #a8ead7 45%, #f6c47a 100%);
}

/* FAQ claro */
.planta-oferta #faq {
  background: var(--planta-claro);
  --cor-fundo: var(--planta-claro);
  --cor-superficie: #ffffff;
}

/* ===== SESSAO ===== */
/* o que você leva: claro */
.planta-sessao #leva {
  background: var(--planta-claro);
  --cor-fundo: var(--planta-claro);
  --cor-superficie: #ffffff;
}
.planta-sessao #leva .area .num { font-family: var(--planta-mono); }

/* formatos e preço: claro, com os dois cards de prancha */
.planta-sessao #formatos {
  background: var(--planta-claro);
  --cor-fundo: var(--planta-claro);
  --cor-superficie: #ffffff;
}

/* o que não é: era petróleo escuro, virou claro com os tokens de texto escuro das outras
   seções claras [WILLIANS 07/10]; o HTML perdeu as classes escuro e tom-petroleo-escuro */
.planta.planta-sessao #nao-e {
  background: var(--planta-claro) !important;
  --cor-fundo: var(--planta-claro);
  --cor-superficie: #ffffff;
}

/* fecho: escuro com o piso 3D voltando embaixo, como o conversar da home */
.planta.planta-sessao #fecho {
  background: var(--planta-escuro) !important;
  overflow: hidden;
  padding-bottom: calc(var(--esp-7) + 88px);
}
.planta.planta-sessao #fecho::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -30%; right: -30%; bottom: -6%; height: 60%;
  background-image:
    linear-gradient(rgba(95, 211, 222, .36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 211, 222, .36) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: atlas-piso 14s linear infinite;
}
.planta.planta-sessao #fecho .wrap { position: relative; z-index: 1; }
.planta.planta-sessao #fecho::after { color: #b8ccd0; }

/* ===== Menos movimento: o piso do fecho para também ===== */
@media (prefers-reduced-motion: reduce) {
  .planta.planta-sessao #fecho::before { animation: none !important; }
}