/* ==========================================================================
   Digitalli — página de escolha de www.digitalli.com.br
   Duas metades, uma para cada site. As cores de acento são as dos tokens de
   cada um (src/digitalli_eletronica/site/assets/css/tokens.css e
   src/digitalli_solar/core/static/site/css/tokens.css).
   ========================================================================== */

:root {
  --fundo: #111214;
  --texto: #f7f7f7;
  --texto-suave: rgba(247, 247, 247, 0.84);
  --texto-fraco: rgba(247, 247, 247, 0.6);
  --linha: rgba(255, 255, 255, 0.14);
  --fonte-titulo: "Sora", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --altura-rodape: 3.25rem;
  --respiro: clamp(1.5rem, 5vw, 4rem);
  color-scheme: dark;
}

/* Eletrônica: o coral da marca; o botão usa o tom fechado (4,5:1 com branco). */
.opcao--eletronica {
  --acento: #f14f44;
  --botao-fundo: #d93c32;
  --botao-texto: #ffffff;
  --tinta: rgba(120, 22, 18, 0.32);
}

/* Solar: o âmbar do "d" no botão, com texto escuro (9:1). */
.opcao--solar {
  --acento: #f2a51f;
  --botao-fundo: #f2a51f;
  --botao-texto: #111111;
  --tinta: rgba(20, 38, 92, 0.36);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

/* ---------- Cabeçalho, por cima das duas fotos --------------------------- */

.topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(1.5rem, 4vw, 2.75rem) 1rem 4.5rem;
  text-align: center;
  background: linear-gradient(rgba(10, 10, 12, 0.88), rgba(10, 10, 12, 0));
  /* O degradê não pode roubar o clique da parte de cima dos cartões. */
  pointer-events: none;
}

.topo__marca {
  width: auto;
  height: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
}

.topo__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.35rem, 0.95rem + 1.7vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* ---------- As duas opções ---------------------------------------------- */

.escolha {
  display: flex;
  min-height: calc(100vh - var(--altura-rodape));
  min-height: calc(100svh - var(--altura-rodape));
}

.opcao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  flex: 1 1 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.opcao + .opcao {
  border-left: 1px solid var(--linha);
}

.opcao__foto img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.85);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}

/* Escurece a base, onde fica o texto, e tinge a foto com a cor do site. */
.opcao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.62) 42%, rgba(10, 10, 12, 0.3) 100%),
    linear-gradient(var(--tinta), var(--tinta));
}

/* Barra de acento na base, que cresce ao passar o mouse. */
.opcao::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--acento);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.opcao__conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
  max-width: 36rem;
  padding: var(--respiro);
  padding-top: 9rem;
}

.opcao__logo {
  width: clamp(13rem, 10rem + 9vw, 19rem);
  height: auto;
}

.opcao__texto {
  max-width: 32rem;
  color: var(--texto-suave);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.6;
}

.opcao__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.25rem;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 10px 30px -12px var(--acento);
}

.opcao__botao span {
  transition: transform 0.3s ease;
}

/* Foco por teclado: o cartão inteiro é o link. */
.opcao:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -8px;
}

.opcao:hover .opcao__foto img,
.opcao:focus-visible .opcao__foto img {
  transform: scale(1.05);
  filter: saturate(1) brightness(0.95);
}

.opcao:hover::after,
.opcao:focus-visible::after {
  transform: scaleX(1);
}

.opcao:hover .opcao__botao span,
.opcao:focus-visible .opcao__botao span {
  transform: translateX(4px);
}

/* Só em tela larga e com mouse: a metade apontada ganha espaço e a outra
   recua para o fundo. */
@media (min-width: 48em) and (hover: hover) {
  .opcao:hover,
  .opcao:focus-visible {
    flex-grow: 1.35;
  }

  .escolha:has(.opcao:hover) .opcao:not(:hover) .opcao__foto img {
    filter: saturate(0.4) brightness(0.55);
  }
}

/* ---------- Rodapé ------------------------------------------------------ */

.rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-rodape);
  padding: 0 1rem;
  border-top: 1px solid var(--linha);
  color: var(--texto-fraco);
  font-size: 0.85rem;
}

.rodape p {
  margin: 0;
}

/* ---------- Celular: uma opção sobre a outra ---------------------------- */

@media (max-width: 47.99em) {
  .escolha {
    flex-direction: column;
  }

  .opcao {
    flex: 1 0 auto;
    min-height: 26rem;
  }

  .opcao + .opcao {
    border-left: 0;
    border-top: 1px solid var(--linha);
  }

  .opcao__conteudo {
    padding: 1.5rem 1rem 2rem;
    padding-top: 6rem;
  }

  /* A primeira fica sob o cabeçalho e precisa de mais folga em cima. */
  .opcao:first-child .opcao__conteudo {
    padding-top: 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}