/* Koike · inicio.css — tela de abertura (layout aprovado: foto no topo). */

.tela-abertura { background: var(--fundo); min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- topo ---------- */
.topo-site {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(20px, 4vw, 54px); background: var(--superficie);
}
.topo-site-logo { width: clamp(110px, 12vw, 158px); }
.topo-site-dir { display: flex; align-items: center; gap: 14px; }
.topo-site-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--cafe-400); color: var(--txt-medio); }
.topo-site-ic .ic, .topo-site-ic svg { width: 20px; height: 20px; }
.topo-site-barra { width: 1px; height: 26px; background: var(--cafe-200); }
.topo-site-rot { color: var(--texto-2); font-size: .98rem; }
.topo-instalar:empty { display: none; }

/* quem está logado (canto de cima) */
.topo-conta { position: relative; }
.conta-entrar { min-height: 44px; padding: .4em 1.1em; font-size: .94rem; text-decoration: none; }
.conta-btn { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px 4px 4px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font: inherit; text-align: left; }
.conta-btn:hover { background: var(--superficie-2); }
.conta-btn:focus-visible { outline: 3px solid var(--caramelo); outline-offset: 2px; }
.conta-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--cafe-700); color: var(--creme-50); }
.conta-avatar .ic { width: 20px; height: 20px; }
.conta-txt { display: grid; line-height: 1.15; min-width: 0; }
.conta-txt strong { font-size: .92rem; color: var(--txt-forte); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-txt span { font-size: .76rem; color: var(--texto-2); }
.conta-seta .ic { width: 16px; height: 16px; transform: rotate(-90deg); color: var(--txt-medio); }
.conta-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px; padding: 6px; display: grid; gap: 2px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); box-shadow: var(--sombra-forte); }
.conta-quem { display: grid; padding: 8px 12px 10px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.conta-quem strong { color: var(--txt-forte); }
.conta-quem span { font-size: .8rem; color: var(--texto-2); }
.conta-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--texto); font: inherit; font-weight: 700; font-size: .92rem; text-align: left; cursor: pointer; }
.conta-item .ic { width: 18px; height: 18px; color: var(--txt-medio); }
.conta-item:hover, .conta-item:focus-visible { background: var(--superficie-2); outline: none; }
.conta-sep { height: 1px; background: var(--linha); margin: 4px 6px; }
@media (max-width: 640px) {
  .conta-txt, .conta-seta, .topo-site-rot, .topo-site-barra, .topo-site-ic { display: none; }
  .conta-btn { padding: 4px; }
}
.topo-instalar-btn { min-height: 40px; padding: .4em 1em; font-size: .92rem; }

/* ---------- foto do topo ----------
   A faixa tem ALTURA MÍNIMA e o texto fica no fluxo (não centralizado por
   posicionamento): em tela baixa a faixa cresce em vez de cortar o texto e
   o traço — o corte apareceu no monitor do Felipe com a versão anterior. */
/* flex: none é obrigatório: com `overflow: hidden` o item flex pode ser
   encolhido abaixo do próprio conteúdo, e foi assim que o traço dourado
   apareceu cortado numa tela mais baixa. */
.hero { flex: none; position: relative; min-height: clamp(340px, 50vh, 560px); display: grid; align-items: center; overflow: hidden; }
.hero picture { position: absolute; inset: 0; }
.hero-foto { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 10, 4, .84) 0%, rgba(20, 10, 4, .6) 34%, rgba(20, 10, 4, .14) 62%, rgba(20, 10, 4, 0) 80%);
}
.hero-txt {
  position: relative; z-index: 1; padding: clamp(26px, 5vh, 56px) clamp(20px, 6vw, 92px);
  color: var(--creme-50); max-width: 720px;
}
.hero-txt h1 { font-weight: 700; letter-spacing: .01em; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero-txt p { margin: 10px 0 0; font-size: clamp(1.05rem, 2.1vw, 1.75rem); color: var(--creme); font-weight: 400; }
.hero-regua { display: block; width: 88px; height: 3px; border-radius: 2px; background: var(--caramelo); margin-top: clamp(12px, 2.4vh, 24px); }

/* ---------- ambientes ---------- */
.ambientes { flex: 1; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 64px) 48px; text-align: center; }
.ambientes h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--txt-forte); }
.regua { display: inline-block; width: 64px; height: 3px; border-radius: 2px; background: var(--caramelo); margin: 14px 0 34px; }
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); max-width: 1180px; margin: 0 auto; }
.cartao-amb {
  display: flex; align-items: center; gap: 18px; text-align: left; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px;
  padding: clamp(14px, 1.6vw, 22px); transition: transform .14s, box-shadow .16s, border-color .16s;
}
.cartao-amb:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--caramelo); }
.amb-ic { display: grid; place-items: center; width: clamp(52px, 5vw, 66px); height: clamp(52px, 5vw, 66px); flex: none;
  border-radius: 16px; background: var(--cafe-700); color: var(--creme-50); }
/* Só o invólucro leva a porcentagem; o desenho enche o invólucro (.ic svg
   no base.css). Com os dois no mesmo seletor a porcentagem se aplicava duas
   vezes: o ícone saía com 25% do quadrado, encostado no canto de cima. */
.amb-ic .ic { width: 50%; height: 50%; }
.amb-txt { display: grid; gap: 4px; flex: 1; min-width: 0; }
.amb-txt strong { font-size: clamp(1.1rem, 1.6vw, 1.45rem); color: var(--txt-forte); }
.amb-txt span { color: var(--texto-2); font-size: .95rem; }
.amb-seta { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--superficie-2); color: var(--txt-acento); transition: background .16s; }
.amb-seta .ic, .amb-seta svg { width: 20px; height: 20px; }
.cartao-amb:hover .amb-seta { background: var(--caramelo); }

.abertura-nota {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; max-width: 760px; margin: 34px auto 0;
  color: var(--cafe-900); background: var(--caramelo-claro); border-radius: 12px; padding: 12px 16px;
  font-size: .9rem; line-height: 1.45;
}
.abertura-nota:empty { display: none; }
.abertura-nota .ic { flex: none; margin-top: 1px; }

/* Monitor baixo (notebook): encolhe a faixa e os espaços para os três
   cartões caberem sem rolar — sem cortar nada. */
@media (max-height: 780px) and (min-width: 861px) {
  .hero { min-height: clamp(280px, 42vh, 400px); }
  .hero-txt { padding-block: clamp(18px, 3vh, 34px); }
  .hero-txt h1 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
  .hero-txt p { font-size: clamp(1rem, 1.6vw, 1.35rem); }
  .hero-regua { margin-top: 12px; }
  .ambientes { padding-block: clamp(18px, 3vh, 34px) 28px; }
  .regua { margin: 10px 0 22px; }
  .cartao-amb { padding: 14px 16px; }
  .abertura-nota { margin-top: 20px; }
}

@media (max-width: 860px) {
  .cartoes { grid-template-columns: 1fr; max-width: 460px; }
  .hero::after { background: linear-gradient(180deg, rgba(20, 10, 4, .7) 0%, rgba(20, 10, 4, .35) 60%, rgba(20, 10, 4, .15) 100%); }
  .hero { align-items: end; }
}