/* --------------------------------------------------------------------------
   Secao 07: Seguranca e dados

   Capitulo CLARO frio: .em-papel.em-papel--fria. Os tokens ja vem trocados
   pelo bloco de contexto (tokens.css), entao aqui nao ha uma unica variante
   "clara": o mesmo CSS serviria no escuro. Duas consequencias praticas:

   - Sobre papel, --sup-2 e branco. O que separa um cartao do fundo e a BORDA
     e a sombra clara, nao mais o contraste de superficie. Por isso os blocos
     estruturais usam --borda-forte, nao --borda: sobre a folha fria (#eaece1)
     a borda leve quase desaparece.
   - A fotografia e escura numa secao clara: ela mora dentro de uma moldura
     (borda + raio + sombra) e nunca sangra ate a borda da secao.

   Severidade sem cor de alerta: a paleta so tem verde. A escada e
   monocromatica: trilho SOLIDO verde para o que fica, trilho TRACEJADO em
   --borda-forte para o que sai; icone em acento contra icone em --suave.

   A divisa com #custos (acima) e #planos (abaixo) e deduzida por :has() em
   css/site.css. Nada de ::before de sangria aqui.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Mapa: fotografia emoldurada + escada dos tres lugares
   -------------------------------------------------------------------------- */
.seguranca-mapa {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--esp-grid);
  align-items: start;
}

.seguranca-foto {
  display: grid;
  gap: var(--e5);
}

/* A moldura leva o parallax (propriedade `translate`); a imagem leva o zoom
   (propriedade `scale`). Sao propriedades distintas: compoem sem brigar, e
   sem brigar tambem com o `transform` que a revelacao anima. */
.seguranca-moldura {
  --mov-forca: 2%;
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--base-pagina);
  box-shadow: var(--sombra-3);
}

.seguranca-moldura img {
  --mov-zoom-de: 1.1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* O assunto (os nos de vidro) vive na metade direita do arquivo; a esquerda
     e negativo quase preto. O recorte retrato busca o assunto. */
  object-position: 70% 45%;
}

.seguranca-foto figcaption {
  max-width: 46ch;
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.8;
}

.seguranca-escada {
  display: grid;
  gap: var(--e4);
  margin: var(--e5) 0 0;
  padding: 0;
  list-style: none;
}

.seguranca-lugar {
  position: relative;
  padding: var(--e5) var(--e5) var(--e5) var(--e7);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-2);
  box-shadow: var(--sombra-1);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.seguranca-lugar:hover {
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-2);
}

/* O trilho. Nao e borda do cartao de proposito: mudar a espessura de uma
   borda deslocaria o texto e os tres itens deixariam de alinhar. */
.seguranca-lugar::before {
  content: "";
  position: absolute;
  top: var(--e5);
  bottom: var(--e5);
  left: var(--e5);
  width: var(--e1);
  border-radius: var(--r-full);
  background: var(--borda-forte);
}

/* Fica no ambiente do provedor: trilho solido, acento, fundo levemente verde. */
.seguranca-lugar--positivo {
  border-color: var(--verde-linha);
  background:
    linear-gradient(150deg, var(--verde-vidro), transparent 54%),
    var(--sup-2);
}

.seguranca-lugar--positivo::before {
  background: var(--verde);
}

/* Sai do ambiente: o mesmo trilho vira fio tracejado, sem acento. */
.seguranca-lugar--neutro::before {
  width: 0;
  background: none;
  border-left: 1px dashed var(--borda-forte);
}

.seguranca-lugar--neutro .cartao-icone {
  border-color: var(--borda-forte);
  background: transparent;
  color: var(--suave);
}

.seguranca-lugar-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.seguranca-lugar-topo h3 {
  flex: 1 1 auto;
}

.seguranca-lugar-topo .selo {
  flex: none;
}

.seguranca-lugar p {
  margin-top: var(--e4);
  font-size: var(--c3);
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   2. Corpo: o caso da IA + os controles do dia a dia
   -------------------------------------------------------------------------- */
.seguranca-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--esp-grid);
  align-items: start;
  margin-top: var(--esp-bloco);
}

.seguranca-ia {
  border-radius: var(--r-xl);
}

.seguranca-ia .sobretitulo {
  color: var(--verde);
}

.seguranca-ia h3 {
  margin: var(--e4) 0;
  font-size: var(--t3);
  letter-spacing: var(--tk2);
}

.seguranca-ia > p {
  font-size: var(--c2);
  line-height: 1.85;
}

.seguranca-ia strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

.seguranca-ia .lista-marcada {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

/* Coluna de controles: fio a esquerda em vez de um segundo cartao, para nao
   competir com o destaque da IA. */
.seguranca-controles {
  padding-left: var(--e6);
  border-left: 1px solid var(--borda-forte);
}

/* Regua que se desenha da esquerda conforme a coluna entra (.mov-fio). */
.seguranca-fio {
  display: block;
  width: min(var(--e9), 40%);
  height: var(--e1);
  margin-bottom: var(--e5);
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--verde), transparent);
}

.seguranca-controles h3 {
  margin-bottom: var(--e5);
}

.seguranca-controles .nota {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

/* --------------------------------------------------------------------------
   3. Google Agenda: espelho de mao unica
   -------------------------------------------------------------------------- */
.seguranca-google {
  display: flex;
  align-items: flex-start;
  gap: var(--e5);
  margin-top: var(--esp-bloco);
  padding: var(--e6);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--sup-2);
  box-shadow: var(--sombra-1);
}

.seguranca-google p {
  margin-top: var(--e3);
  max-width: 88ch;
  font-size: var(--c3);
  line-height: 1.85;
}

.seguranca-google strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --------------------------------------------------------------------------
   4. Rodape da secao
   -------------------------------------------------------------------------- */
/* Este paragrafo carregava tambem .nota, so pela cor. Como as duas classes
   pesam (0,1,0), quem ganhava o tamanho era a ordem das folhas, nao a intencao.
   Pior: ele saia na tela com .nota e lendo em 14px, o que faz de .nota um
   rotulo mentiroso para quem inspeciona. Agora a cor vem daqui e o .nota saiu
   do HTML. */
.seguranca-rodape {
  max-width: 72ch;
  margin-top: var(--esp-bloco);
  font-size: var(--c3);
  line-height: 1.8;
  color: var(--suave);
}

.seguranca-rodape a {
  color: var(--verde);
  font-weight: var(--p-forte);
  text-decoration: underline;
  text-underline-offset: var(--e1);
  transition: color var(--dur-1) var(--ease);
}

.seguranca-rodape a:hover {
  color: var(--verde-brilho);
}

/* --------------------------------------------------------------------------
   5. Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .seguranca-mapa,
  .seguranca-corpo {
    gap: var(--e7);
  }
}

@media (max-width: 980px) {
  .seguranca-mapa,
  .seguranca-corpo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Numa coluna so a fotografia vira faixa: recorte largo, que e o formato
     nativo do arquivo, e portanto o mais generoso com o assunto. */
  .seguranca-moldura img {
    aspect-ratio: 16 / 9;
    object-position: 62% 50%;
  }

  .seguranca-foto figcaption {
    max-width: none;
  }

  .seguranca-controles {
    padding-left: 0;
    padding-top: var(--e6);
    border-left: 0;
    border-top: 1px solid var(--borda-forte);
  }
}

@media (max-width: 680px) {
  .seguranca-lugar {
    padding: var(--e5) var(--e4) var(--e5) var(--e6);
  }

  .seguranca-lugar::before {
    top: var(--e4);
    bottom: var(--e4);
    left: var(--e3);
  }

  /* Estreito: caixa de icone e selo dividem a primeira linha, o titulo desce
     inteiro para a segunda em vez de espremer em duas palavras por linha. */
  .seguranca-lugar-topo .cartao-icone {
    order: 1;
  }

  .seguranca-lugar-topo .selo {
    order: 2;
    margin-left: auto;
  }

  .seguranca-lugar-topo h3 {
    order: 3;
    flex-basis: 100%;
    font-size: var(--t5);
  }

  .seguranca-ia h3 {
    font-size: var(--t4);
    letter-spacing: var(--tk3);
  }

  .seguranca-ia > p {
    font-size: var(--c3);
  }

  .seguranca-google {
    flex-direction: column;
    gap: var(--e4);
  }
}

@media (max-width: 380px) {
  .seguranca-moldura img {
    aspect-ratio: 4 / 3;
  }

  .seguranca-google {
    padding: var(--e4);
  }
}