/* ================================================================
   Página inicial (genérica) — "Qual é o seu negócio?"
   Base: tema escuro (styles-escuro.css). Aqui só o layout dos dois "portais".
   ================================================================ */
body { background: #0E0F11; }

.ini-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2rem;
}
.ini-header img { height: 38px; width: auto; }
.ini-wpp {
  font-size: .85rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border-hover); padding: .55rem 1.05rem; border-radius: 100px;
  transition: color .2s, border-color .2s;
}
.ini-wpp:hover { color: var(--text); border-color: var(--green); }

/* fundo: bambuzal escuro da marca, escurecido pra dar leitura */
.ini-hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 7rem 1.5rem 4rem;
  background:
    linear-gradient(180deg, rgba(14,15,17,.5) 0%, rgba(14,15,17,.72) 55%, #0E0F11 100%),
    url('/assets/hero_bg.png') 72% center / cover no-repeat;
}
.ini-hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-weight: 800; }
.ini-hero h1 em { font-style: normal; color: var(--green); }
.ini-sub { max-width: 560px; margin: 1.1rem auto 0; color: var(--muted); font-size: 1.08rem; }

/* os dois portais */
.ini-doors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  width: 100%; max-width: 980px; margin-top: 2.75rem; text-align: left;
}
.door {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  border: 1px solid var(--glass-border); position: relative;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, border-color .3s;
}
.door:active { transform: scale(.98); }
@media (hover: hover) { .door:hover { transform: translateY(-6px); } }
.door-media { height: 210px; background-size: cover; background-position: center 62%; position: relative; }
/* margin-top negativo: o texto cobre 1px do fim da imagem e elimina a linha do corte */
.door-body { padding: 1.5rem 1.7rem 1.8rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; position: relative; margin-top: -1px; }
.door-dark .door-body { background: #141518; }
.door-light .door-body { background: #F4F2EE; }
.door-tag {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.door h2 { font-size: 1.75rem; }
.door p { font-size: .96rem; line-height: 1.6; color: var(--muted); }
.door .btn-primary { margin-top: 1.1rem; align-self: flex-start; }
@media (hover: hover) { .door:hover .btn-primary { transform: translateY(-2px); } }

/* vídeo que toca ao passar o mouse (por cima da imagem) */
.door-media { overflow: hidden; }
.door-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s;
}
.door-video.on { opacity: 1; }

/* veículos: escuro, com a foto do vídeo */
.door-dark { background: #141518; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.door-dark .door-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,21,24,0) 35%, #141518 100%);
}
@media (hover: hover) { .door-dark:hover { border-color: rgba(29,224,104,.55); box-shadow: 0 24px 70px rgba(29,224,104,.16); } }

/* clínicas: a foto também "desce" pro texto (mesma profundidade do carro) */
.door-light .door-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,242,238,0) 30%, rgba(244,242,238,.55) 62%, #F4F2EE 100%);
}
/* clínicas: claro, como é a página delas */
.door-light { background: #F4F2EE; border-color: rgba(255,255,255,.8); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.door-light h2 { color: #1A1714; }
.door-light p { color: #6F6963; }
.door-light .door-tag { color: #0E9A48; }
.door-media-eleva {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 60% 80% at 82% 18%, rgba(29,224,104,.30), transparent 60%),
    radial-gradient(ellipse 50% 60% at 8% 92%, rgba(184,123,110,.20), transparent 60%),
    #EDE9E3;
}
.door-media-eleva span {
  font-family: var(--font-display); font-weight: 800; font-size: 5.4rem; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(26,23,20,.15);
}
@media (hover: hover) { .door-light:hover { box-shadow: 0 24px 70px rgba(255,255,255,.12); } }

.ini-other { margin-top: 2rem; color: var(--muted); font-size: .95rem; }
.ini-other a { color: var(--green); font-weight: 600; }
.ini-other a:hover { text-decoration: underline; }

.ini-footer {
  padding: 1.75rem 2rem 2rem; display: flex; gap: 1rem; flex-wrap: wrap;
  justify-content: space-between; color: var(--muted); font-size: .8rem;
  border-top: 1px solid var(--border); background: #0E0F11;
}
.ini-footer a:hover { color: var(--text); }

@media (max-width: 820px) {
  .ini-doors { grid-template-columns: 1fr; }
  .door-media { height: 170px; }
  .ini-header { padding: 1rem 1.25rem; }
  .ini-hero { padding-top: 6rem; }
}