/* --------------------------------------------------------------------------
   08. Segurança e dados: fonte/secoes/seguranca.php

   Capítulo de papel frio (.em-papel--fria), porta do molde sem fotografia.
   A escada de lugares tem um trilho à esquerda de cada placa: sólido e com
   acento onde o dado fica conosco, tracejado onde ele vai a um parceiro
   pelo contrato. Os controles ficam numa coluna de fio, sem segundo cartão.
   -------------------------------------------------------------------------- */
.seguranca-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--esp-grid);
  align-items: start;
}

.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);
}

.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);
}

.seguranca-lugar--positivo {
  border-color: var(--acento-linha);
  background:
    linear-gradient(150deg, var(--acento-vidro), transparent 54%),
    var(--sup-2);
}

.seguranca-lugar--positivo::before {
  background: var(--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;
}

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

.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(--acento), transparent);
  transform-origin: left center;
}

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

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

@media (max-width: 1200px) {
  .seguranca-corpo {
    gap: var(--e7);
  }
}

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

  .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);
  }

  .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);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seguranca-lugar {
    transition: none;
  }
}