/* =========================================================================
   ANALLA — CAMADA MODERNA DO PORTAL
   -------------------------------------------------------------------------
   Carrega DEPOIS do portal.css e refina o visual sem trocar nenhuma classe
   nem mexer no PHP. Para desfazer, basta remover a linha <link> do cabecalho.

   O que muda: profundidade de cor, escala tipografica, respiro, cabecalho
   com vidro fosco, cartoes com elevacao suave, hero com gradiente, foco
   acessivel e micro-animacoes discretas.
   ========================================================================= */

:root{
  /* paleta com mais profundidade, mantendo a identidade petroleo + ambar */
  --petroleo:#08272C; --petroleo-2:#0E3A42; --petroleo-3:#14525C;
  --ambar:#F5A93F; --ambar-forte:#DF8A16; --ambar-fraco:#FEF3E2;
  --osso:#F7F5F1; --osso-2:#EFECE5;
  --tinta:#0E1C1B; --tinta-fraca:#5C6C6B;
  --linha:#E1DDD4;

  /* raios um pouco maiores = ar mais contemporaneo */
  --r-p:12px; --r:18px; --r-g:26px;

  /* sombras em camadas (mais realistas que uma sombra unica) */
  --s:0 1px 2px rgba(8,39,44,.05), 0 2px 6px rgba(8,39,44,.05);
  --s-md:0 2px 6px rgba(8,39,44,.06), 0 12px 32px rgba(8,39,44,.10);
  --s-lg:0 4px 12px rgba(8,39,44,.08), 0 32px 72px rgba(8,39,44,.18);

  --env:1160px;
}

body{ background:
  radial-gradient(1100px 520px at 88% -12%, #FFF6E8 0%, transparent 62%),
  radial-gradient(900px 460px at -8% 4%, #EAF2F1 0%, transparent 58%),
  var(--osso);
  background-attachment: fixed;
}

/* ------------------------------------------------------------ tipografia */
.disp{ letter-spacing:-.035em; }
.tit{ font-size:clamp(30px,4vw,46px); letter-spacing:-.03em; line-height:1.12; }
.lead{ font-size:18px; line-height:1.62; max-width:640px; }
.olho{ letter-spacing:.18em; font-size:11px; }
.olho::before{ width:30px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--ambar),var(--argila)); }

section{ padding:clamp(64px,9vw,116px) 0; }

/* -------------------------------------------------------------- cabecalho */
.topo{
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(247,245,241,.72);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.topo.fixa{
  background:rgba(247,245,241,.88);
  border-bottom-color:var(--linha);
  box-shadow:0 1px 0 rgba(8,39,44,.04), 0 10px 30px rgba(8,39,44,.06);
}
.marca-txt{ letter-spacing:-.02em; }
.marca-txt span{ color:var(--ambar); }
.marca img{ height:34px; width:auto; }

.nav a{ position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--ambar); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav a:hover::after{ transform:scaleX(1); }

/* -------------------------------------------------------------- botoes */
.btn{ border-radius:var(--r-p); font-weight:600; letter-spacing:-.01em;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.btn-a{ background:linear-gradient(180deg, var(--ambar) 0%, var(--ambar-forte) 100%);
  color:#2B1800; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(223,138,22,.26); }
.btn-a:hover{ transform:translateY(-2px); box-shadow:0 3px 8px rgba(0,0,0,.07), 0 16px 34px rgba(223,138,22,.34); }
.btn-p{ background:linear-gradient(180deg,var(--petroleo-2),var(--petroleo));
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 20px rgba(8,39,44,.22); }
.btn-p:hover{ transform:translateY(-2px); box-shadow:0 3px 8px rgba(0,0,0,.10), 0 16px 34px rgba(8,39,44,.28); }
.btn-c{ background:rgba(255,255,255,.7); backdrop-filter:blur(6px); }
.btn-c:hover{ background:#fff; border-color:var(--petroleo-3); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.99); }

/* --------------------------------------------------------------- cartoes */
.cartao, .plano, .quadro, .cx, .cs, .painel-item, .cartao-marca{
  border-radius:var(--r);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(4px);
  border:1px solid var(--linha);
  box-shadow:var(--s);
  transition:transform .22s ease, box-shadow .28s ease, border-color .22s ease;
}
.plano:hover, .cx:hover, .cs:hover, .painel-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--s-md);
  border-color:#D3CEC2;
}
/* destaque do plano recomendado, se existir */
.plano.rev{ border-color:var(--ambar); box-shadow:0 0 0 4px var(--ambar-fraco), var(--s-md); }
.preco{ letter-spacing:-.04em; }

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; }
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--linha),transparent);
}
.hero-lead{ font-size:19px; line-height:1.6; }

/* ------------------------------------------------------- painel do cliente */
.painel-topo{
  background:linear-gradient(135deg,var(--petroleo) 0%, var(--petroleo-2) 55%, var(--petroleo-3) 100%);
  position:relative; overflow:hidden;
}
.painel-topo::after{
  content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle,rgba(245,169,63,.20),transparent 68%);
}
.painel-corpo{ padding-top:36px; }
.painel-item{ padding:22px; }

/* ------------------------------------------------------------ formularios */
.campo input, .campo select, .campo textarea, input[type=text], input[type=email],
input[type=password], input[type=date], input[type=number], select, textarea{
  border-radius:var(--r-p);
  border:1.5px solid var(--linha);
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--petroleo-3);
  box-shadow:0 0 0 4px rgba(20,82,92,.12);
}

/* ---------------------------------------------------------------- avisos */
.aviso{ border-radius:var(--r-p); border:1px solid transparent; }
.aviso.ok{ background:var(--musgo-fraco); border-color:rgba(47,125,91,.24); }
.aviso.erro{ background:var(--argila-fraco); border-color:rgba(196,100,74,.26); }

/* ---------------------------------------------------------------- rodape */
.rodape{ background:var(--petroleo); }

/* --------------------------------------------------- acessibilidade / motion */
:focus-visible{ outline:3px solid var(--ambar); outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .plano:hover,.cx:hover,.cs:hover,.painel-item:hover,.btn:hover{ transform:none; }
}

/* entrada suave das secoes (discreta) */
@media (prefers-reduced-motion: no-preference){
  .cartao, .plano, .cx, .cs, .painel-item{ animation:sobe .5s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes sobe{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
}

/* ------------------------------------------------------------- responsivo */
@media (max-width:640px){
  .env{ padding:0 18px; }
  .tit{ font-size:clamp(26px,7vw,34px); }
  .lead,.hero-lead{ font-size:16.5px; }
  .btn{ padding:12px 20px; }
}