/* ==========================================================================
   Página de captura — Aula de Segunda · Dona de Loja (Fernanda Rolin)
   Identidade: Noite / Desert / Cobre — manual IDV Dona de Loja (JEFFCOUT, 2024)
   Fregan Serif -> Playfair Display · Outfit (original) · Loren Blake -> Parisienne

   Versão CLARA: o Desert é o fundo, o Noite é a letra e o Cobre é o destaque.
   ========================================================================== */

:root{
  /* Noite — agora a cor do texto */
  --noite-01:#7D8FB2; --noite-02:#5C7099; --noite-03:#293D66;
  --noite-04:#17294D; --noite-05:#0A1833; --noite-06:#030A1A;
  /* Desert — agora o fundo */
  --desert-01:#FBF6F1; --desert-02:#F6ECDD; --desert-03:#EAD2B6;
  --desert-04:#E0B993; --desert-05:#C77B49; --desert-06:#9A5136;
  /* Cobre — o destaque */
  --cobre-01:#FBEAE4; --cobre-02:#FADACD; --cobre-03:#F3B29B;
  --cobre-04:#E27754; --cobre-05:#CE5D35; --cobre-06:#904027;

  /* cobre escurecido o bastante para ler sobre creme (AA) */
  --acento:#A8492A;

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script:'Parisienne', cursive;

  --raio:16px;
  --transicao:220ms cubic-bezier(.4,0,.2,1);
}

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

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

body{
  font-family:var(--sans);
  background:var(--desert-01);
  color:var(--noite-04);
  min-height:100dvh;
  display:flex; flex-direction:column;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* ---------------------------------------------------------------- fundo -- */
.fundo{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:linear-gradient(168deg, #FDFAF7 0%, #FBF6F1 46%, #F6ECDD 100%);
}
.brilho{ position:absolute; border-radius:50%; filter:blur(90px); }
.brilho-cobre{
  width:min(62vw,620px); aspect-ratio:1; left:-16vw; top:4vh; opacity:.55;
  background:radial-gradient(circle, rgba(226,119,84,.30) 0%, rgba(226,119,84,0) 70%);
}
.brilho-noite{
  width:min(70vw,760px); aspect-ratio:1; right:-20vw; bottom:-18vh; opacity:.5;
  background:radial-gradient(circle, rgba(125,143,178,.34) 0%, rgba(125,143,178,0) 70%);
}
.marca-dagua{
  position:absolute; right:-9vw; top:50%; translate:0 -50%;
  width:min(58vw,640px); opacity:.34;
}
.marca-dagua path{ fill:var(--desert-03); }
.marca-dagua .estrela{ fill:var(--desert-01); }

/* ----------------------------------------------------------------- topo -- */
.topo{
  position:relative; z-index:2;
  padding:clamp(18px,2.6vw,26px) clamp(20px,5vw,64px) 0;
}
.logo{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--noite-04);
}
.simbolo{ width:32px; height:32px; flex:none; }
.logo-texto{
  font-family:var(--serif); font-size:1.02rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
}
.logo-texto sup{ font-size:.5em; color:var(--acento); top:-.7em; }

/* ---------------------------------------------------------------- palco -- */
.palco{
  position:relative; z-index:2; flex:1;
  width:100%; max-width:1200px; margin-inline:auto;
  padding:clamp(8px,1.6vw,18px) clamp(20px,5vw,64px) clamp(28px,3.4vw,40px);
  display:grid; grid-template-columns:1fr; gap:clamp(4px,3vw,40px);
  align-content:center;
}

/* -------------------------------------------------------------- retrato -- */
.retrato{
  position:relative; margin:0;
  display:flex; flex-direction:column; align-items:center;
}
/* fio cobre deslocado atrás do arco — o "amuleto" da marca, sem virar enfeite */
.retrato::before{
  content:""; position:absolute; z-index:0;
  left:50%; translate:calc(-50% + 16px) 0; top:18px;
  width:min(100%,430px); height:calc(100% - 46px);
  border:1.5px solid var(--desert-04);
  border-radius:1000px 1000px 18px 18px;
}
.moldura{
  position:relative; z-index:1;
  flex:1 1 auto; min-height:0;
  width:min(100%,430px);
  border-radius:1000px 1000px 18px 18px;
  overflow:hidden;
  background:var(--desert-02);
  box-shadow:0 30px 60px -32px rgba(23,41,77,.45);
}
.moldura img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
}
.assinatura{
  flex:none; position:relative; z-index:2;
  text-align:center; margin-top:12px;
  font-family:var(--script); font-size:clamp(1.4rem,3.2vw,1.85rem);
  line-height:1.25; color:var(--desert-06);
}

/* ------------------------------------------------------------- conteúdo -- */
.conteudo{ position:relative; z-index:2; max-width:560px; }

.selo{
  display:inline-flex; align-items:center; gap:9px;
  font-size:clamp(.66rem,1.9vw,.74rem); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cobre-06);
  background:var(--cobre-01);
  border:1px solid rgba(226,119,84,.38);
  border-radius:999px; padding:8px 16px 8px 13px;
  margin-bottom:clamp(16px,2.6vw,22px);
  white-space:nowrap;   /* a faixa da aula nunca quebra em duas linhas */
}
.selo i{ font-style:normal; color:rgba(144,64,39,.45); }
.ponto{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--cobre-05); box-shadow:0 0 0 0 rgba(206,93,53,.6);
  animation:pulso 2s infinite;
}
@keyframes pulso{
  70%{ box-shadow:0 0 0 9px rgba(206,93,53,0); }
  100%{ box-shadow:0 0 0 0 rgba(206,93,53,0); }
}

h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.85rem,4.6vw,2.85rem);
  line-height:1.13; letter-spacing:-.012em;
  color:var(--noite-05);
  text-wrap:balance;
}
h1 em{
  display:block; font-style:italic; font-weight:400;
  color:var(--acento);
}

.linha-fina{
  font-size:clamp(1rem,2.4vw,1.14rem); font-weight:400; line-height:1.62;
  color:var(--noite-03);
  margin-top:clamp(14px,2.2vw,20px);
  max-width:34em;
}

/* ---------------------------------------------------------------- ficha -- */
.ficha{
  margin-top:clamp(24px,3.4vw,34px);
  background:rgba(255,255,255,.72);
  border:1px solid var(--desert-03);
  border-radius:var(--raio);
  padding:clamp(20px,3.2vw,30px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 56px -30px rgba(23,41,77,.42);
}

.campo{ margin-bottom:16px; }
.campo label{
  display:block; margin-bottom:7px;
  font-size:.7rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--noite-02);
}
.campo input{
  width:100%; font-family:inherit; font-size:1rem; font-weight:400;
  color:var(--noite-05);
  background:var(--desert-01);
  border:1px solid var(--desert-03);
  border-radius:10px; padding:13px 15px;
  transition:border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.campo input::placeholder{ color:#9FA9BD; font-weight:300; }
.campo input:hover{ border-color:var(--desert-04); }
.campo input:focus{
  outline:none; background:#FFFDFB;
  border-color:var(--cobre-05);
  box-shadow:0 0 0 3px rgba(206,93,53,.18);
}
.campo.invalido input{ border-color:#C0392B; background:#FEF6F4; }
.campo.invalido input:focus{ box-shadow:0 0 0 3px rgba(192,57,43,.18); }

.erro{
  display:none; margin-top:6px;
  font-size:.78rem; font-weight:500; color:#B03A26;
}
.campo.invalido .erro{ display:block; }

/* ---------------------------------------------------------------- botão -- */
.botao{
  position:relative; width:100%; margin-top:8px;
  font-family:inherit; font-size:clamp(.92rem,2.2vw,1.02rem); font-weight:700;
  letter-spacing:.075em; text-transform:uppercase;
  color:#FFF9F4;
  background:linear-gradient(135deg, #BE5230 0%, #A8492A 48%, #8E3E26 100%);
  border:none; border-radius:10px; padding:17px 22px; cursor:pointer;
  box-shadow:0 14px 28px -12px rgba(144,64,39,.6);
  transition:transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}
.botao:hover{ transform:translateY(-2px); box-shadow:0 20px 34px -12px rgba(144,64,39,.7); filter:brightness(1.06); }
.botao:active{ transform:translateY(0); }
.botao:focus-visible{ outline:3px solid var(--cobre-05); outline-offset:3px; }
.botao[disabled]{ cursor:progress; filter:saturate(.5) brightness(.95); transform:none; }
.botao[disabled]:hover{ transform:none; }

.botao-carregando{ display:none; }
.botao[disabled] .botao-texto{ visibility:hidden; }
.botao[disabled] .botao-carregando{
  display:block; position:absolute; inset:0; margin:auto;
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,249,244,.32); border-top-color:#FFF9F4;
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

.micro{
  margin-top:13px; text-align:center;
  font-size:.92rem; font-weight:500; color:var(--desert-06);
}
.lgpd{
  margin-top:7px; text-align:center;
  font-size:.76rem; font-weight:400; line-height:1.5; color:var(--noite-02);
}
.aviso{
  display:none; margin-top:12px; text-align:center;
  font-size:.86rem; font-weight:500; color:#B03A26;
}
.aviso.aparece{ display:block; }

/* --------------------------------------------------------------- rodapé -- */
.rodape{
  position:relative; z-index:2; text-align:center;
  padding:0 20px clamp(16px,2.2vw,24px);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--noite-02);
}
.rodape sup{ color:var(--acento); }

/* ================================ CELULAR ================================ */
@media (max-width:899px){
  .palco{ padding-top:0; gap:0; }
  .retrato{ order:-1; height:clamp(215px,27vh,270px); margin-bottom:22px; }
  /* no celular a figura nao tem assinatura embaixo: o fio precisa de altura
     cheia para sobrar por fora da foto, senao vira um risco DENTRO dela */
  .retrato::before{ top:14px; height:100%; translate:calc(-50% + 12px) 0; width:min(100%,232px); }
  .moldura{ width:min(100%,232px); }
  .assinatura{ display:none; }
  .conteudo{ margin-inline:auto; text-align:center; }
  .selo{
    margin-inline:auto;
    font-size:.6rem; letter-spacing:.11em; gap:7px; padding:7px 13px 7px 10px;
  }
  .linha-fina{ margin-inline:auto; font-size:1rem; line-height:1.55; }
  .ficha{ text-align:left; margin-top:18px; }
  .marca-dagua{ right:-30vw; opacity:.28; }
}

/* celular estreito (iPhone SE e afins) */
@media (max-width:389px){
  .selo{ font-size:.55rem; letter-spacing:.07em; padding:6px 11px 6px 9px; }
  h1{ font-size:1.62rem; }
  .retrato{ height:clamp(195px,24vh,225px); }
  .retrato::before, .moldura{ width:min(100%,196px); }
}

/* ============================== COMPUTADOR =============================== */
@media (min-width:900px){
  .palco{
    grid-template-columns:minmax(280px,.9fr) minmax(0,1.04fr);
    align-items:center;
  }
  /* altura amarrada a tela para a pagina caber sem rolagem no notebook;
     a figura e uma coluna flex, entao a assinatura nunca sai para fora */
  .retrato{ height:min(76vh,680px); justify-content:flex-end; }
  .conteudo{ align-self:center; padding-bottom:clamp(6px,2vh,24px); }
  .ficha{ margin-top:clamp(20px,2.6vw,28px); }
}

@media (min-width:1100px){
  .palco{ gap:56px; }
}

/* =============================== TELA BAIXA ============================== */
@media (min-width:900px) and (max-height:820px){
  .topo{ padding-top:14px; }
  h1{ font-size:clamp(1.62rem,3.1vw,2.12rem); }
  .linha-fina{ font-size:.98rem; line-height:1.55; margin-top:10px; }
  .selo{ padding:6px 14px 6px 11px; margin-bottom:12px; }
  .ficha{ padding:16px 20px; margin-top:16px; }
  .campo{ margin-bottom:9px; }
  .campo label{ margin-bottom:5px; font-size:.67rem; }
  .campo input{ padding:10px 13px; }
  .botao{ padding:14px 20px; margin-top:6px; }
  .micro{ margin-top:9px; font-size:.86rem; }
  .lgpd{ margin-top:4px; font-size:.73rem; line-height:1.45; }
  .assinatura{ font-size:1.35rem; margin-top:7px; }
  .retrato{ height:min(62vh,520px); }
  .palco{ padding-top:6px; padding-bottom:14px; }
  .rodape{ padding-bottom:12px; }
}

/* ============================== ACESSIBILIDADE =========================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================ ISCA (HONEYPOT) ============================
   Esconde do olho e do leitor de tela, mas NAO com display:none nem
   visibility:hidden — robo bom detecta esses dois e pula o campo. Tirar da
   tela com position absoluta engana mais e nao atrapalha ninguem.
   O campo tambem tem tabindex="-1", entao teclado nunca cai nele. */
.fora-da-tela{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ========================= TARJA DE CONSENTIMENTO ========================
   So aparece se CONFIG_LP.GTM_ID estiver preenchido. Sem rastreador, sem
   tarja — banner em pagina que nao usa cookie e atrito de graca.
   Os dois botoes tem o MESMO peso visual de proposito: recusar nao pode ser
   mais dificil que aceitar. */
.tarja-consentimento{
  position:fixed; z-index:50; left:16px; right:16px; bottom:16px;
  max-width:560px; margin-inline:auto;
  background:#FFFDFB; border:1px solid var(--desert-03); border-radius:var(--raio);
  padding:18px 20px; box-shadow:0 24px 56px -22px rgba(23,41,77,.4);
  font-size:.9rem; line-height:1.55; color:var(--noite-03);
}
.tarja-acoes{ display:flex; gap:10px; margin-top:14px; }
.tarja-botao{
  flex:1; font-family:inherit; font-size:.88rem; font-weight:600;
  padding:11px 14px; border-radius:9px; cursor:pointer;
  transition:filter var(--transicao), transform var(--transicao);
}
.tarja-botao:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.tarja-botao:focus-visible{ outline:3px solid var(--cobre-05); outline-offset:2px; }
.tarja-recusar{ background:var(--desert-02); border:1px solid var(--desert-04); color:var(--noite-04); }
.tarja-aceitar{ background:var(--acento); border:1px solid var(--acento); color:#FFF9F4; }
.tarja-link{
  display:inline-block; margin-top:11px;
  font-size:.78rem; color:var(--noite-02); text-underline-offset:3px;
}

/* ============================== LINK DA LGPD ============================= */
.lgpd a{ color:var(--noite-02); text-underline-offset:3px; }
.lgpd a:hover{ color:var(--acento); }