/*
 * seguranca-v2.css: só o que é da página Segurança e dados v2. O comum está em assets/css/v2.css.
 * Texto em _spec/04-COPY/seguranca-v2.md. Leitura calma: lista com fios de 1px, título à esquerda e frase à direita,
 * sem cartão, sem ícone, sem cadeado, sem escudo. O fio de luz só pulsa no fechamento (sem gatilhos nas seções).
 */

/* ============================================================ */
/* 1. Herói: foto C6 (sala de espera vazia). O título usa a parede livre.   */
/* ============================================================ */
.pagina--seguranca-v2 .heroi h1{
  font-size: clamp(2.125rem, 0.6rem + 3.2vw, 3.75rem);
  line-height: 1.06;
  max-inline-size: 13em;
}
.pagina--seguranca-v2 .heroi__apoio{ max-inline-size: 42ch; }
.pagina--seguranca-v2 .heroi__foto img{ object-position: 62% 60%; }
@media (min-width: 701px){
  /* a parede livre da foto vai do meio da cena até a direita; o texto começa nela, no alto, acima das poltronas */
  .pagina--seguranca-v2 .heroi{ align-items: flex-start; }
  .pagina--seguranca-v2 .heroi__texto{
    padding-block: calc(var(--cabecalho-h) + clamp(2rem, 5vw, 4.5rem)) 4rem;
    padding-inline-start: max(var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem)), 38vw);
  }
  .pagina--seguranca-v2 .heroi h1{ max-inline-size: 11em; }
}
/* até 1199px a folhagem da foto ocupa mais da largura: o texto começa mais à direita, na parede */
@media (min-width: 701px) and (max-width: 1199px){
  .pagina--seguranca-v2 .heroi__texto{ padding-inline-start: max(var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem)), 45vw); }
  .pagina--seguranca-v2 .heroi h1{ font-size: clamp(2rem, 1rem + 2.2vw, 2.75rem); }
}
/* No celular o texto fica acima da foto, que só existe na horizontal: recorte com as duas poltronas. */
@media (max-width: 700px){
  .pagina--seguranca-v2 .heroi{ background: #F7F9F8; }
  .pagina--seguranca-v2 .heroi__foto{ aspect-ratio: 4 / 3; }
  .pagina--seguranca-v2 .heroi__foto img{ object-position: 70% 62%; }
}

/* ============================================================ */
/* 2. Controles: lista em duas colunas, título à esquerda e frase à direita */
/* ============================================================ */
.pagina--seguranca-v2 main > section.ctrl{ padding-block: clamp(2.5rem, 5vw, 5rem); }
/* a classe "cenas" (usada só pelo fio de luz, que mede a margem do texto por ".cenas .envelope") traz um h2 menor */
.pagina--seguranca-v2 .ctrl h2{
  grid-column: auto;
  grid-row: auto;
  font-size: clamp(1.875rem, 1.2rem + 2.1vw, 2.875rem);
  line-height: 1.1;
  max-inline-size: 22ch;
}
.pagina--seguranca-v2 .ctrl__lista{
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  border-block-end: 1px solid var(--linha-v2);
}
.ctrl__linha{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  padding-block: 1.25rem 1.4rem;
  border-block-start: 1px solid var(--linha-v2);
}
.ctrl__tit{
  font-weight: 500;
  font-size: var(--t-lide);
  line-height: 1.35;
  color: #151A17;
  max-inline-size: 34ch;
}
.ctrl__txt{ display: grid; gap: .6rem; }
.ctrl__txt p{ margin: 0; font-size: var(--t-corpo); line-height: 1.65; max-inline-size: 62ch; font-weight: 400; }
.pagina--seguranca-v2 .ctrl__txt .nota{ font-size: var(--t-mini); line-height: 1.55; color: var(--suave); max-inline-size: 62ch; }
@media (min-width: 861px){
  .ctrl__linha{ grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); padding-block: 1.5rem 1.7rem; }
}

/* ============================================================ */
/* 3. Os documentos completos                                      */
/* ============================================================ */
.pagina--seguranca-v2 main > section.docs{ padding-block: clamp(2.5rem, 5vw, 5rem); }
.docs__grade{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.docs h2{ font-size: clamp(1.875rem, 1.2rem + 2.1vw, 2.875rem); line-height: 1.1; max-inline-size: 16ch; }
.pagina--seguranca-v2 .docs__apoio{ margin-block-start: 1.1rem; font-size: var(--t-lide); line-height: 1.5; max-inline-size: 36ch; }
.docs__lista{ list-style: none; margin: 0; padding: 0; border-block-end: 1px solid var(--linha-v2); }
.docs__lista li{ padding-block: 1rem; border-block-start: 1px solid var(--linha-v2); font-size: var(--t-corpo); line-height: 1.55; color: var(--corpo); }
.docs__tit{ font-weight: 500; color: #151A17; }
.docs__tit a, .docs__form a{
  color: var(--esm);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  border-radius: 3px;
}
.docs__tit a:focus-visible, .docs__form a:focus-visible{ outline: 2px solid var(--esm); outline-offset: 2px; box-shadow: none; }
@media (hover: hover) and (pointer: fine){ .docs__tit a:hover, .docs__form a:hover{ text-decoration-thickness: 2px; } }
.docs__enc, .docs__form{ margin-block: 1.5rem 0; font-size: var(--t-corpo); line-height: 1.6; max-inline-size: 62ch; }
.docs__form{ margin-block-start: .75rem; color: var(--suave); }
.docs__email{ font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: .9em; color: #151A17; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
@media (min-width: 861px){
  .docs__grade{ grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
}

/* ============================================================ */
/* 4. Fechamento esmeralda, sem foto                                */
/* ============================================================ */
.fecho--sem-foto .fecho__grade{ grid-template-columns: minmax(0, 1fr); }
.fecho--sem-foto .fecho__texto{ max-inline-size: 40rem; }
.fecho .fecho__micro{ margin-block: .9rem 0; font-size: var(--t-pequeno); color: var(--tinta-suave); }