/* AL Soluções — interações leves, sem bibliotecas de animação. */

/* Navegação: cápsula suave e traço luminoso. */
.nav a:not(.btn) {
  isolation: isolate;
  transition: color .25s, background .25s, box-shadow .3s, transform .3s var(--ease);
}
.nav a:not(.btn)::before {
  content: ""; position: absolute; inset: 3px 2px; z-index: -1;
  border: 1px solid transparent; border-radius: inherit;
  background: linear-gradient(135deg, rgba(214,178,94,.12), rgba(214,178,94,.025));
  opacity: 0; transform: scale(.9); transition: opacity .25s, transform .3s var(--ease), border-color .25s;
}
.nav a:not(.btn)::after {
  left: 24px; right: 24px; bottom: 6px; height: 2px;
  border-radius: 2px; transform-origin: center;
  box-shadow: 0 0 12px rgba(214,178,94,.38);
}
.nav a:not(.btn):is(:hover, :focus-visible, .is-active) { color: var(--gold-soft); }
.nav a:not(.btn):is(:hover, :focus-visible, .is-active)::before { opacity: 1; transform: scale(1); border-color: rgba(214,178,94,.18); }
.nav a:not(.btn):focus-visible::after { transform: scaleX(1); }

/* O arquivo de imagem do cenário é definido pelo layout de serviços. */
.credit-scene { position: relative; isolation: isolate; }
.credit-scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,12,.94), rgba(11,11,12,.80)), url('../img/credit-atmosphere.webp') center / cover no-repeat;
  opacity: .9; filter: blur(26px); clip-path: inset(0);
  background-size: cover, 1600px auto; background-repeat: no-repeat, repeat-y;
}
.credit-scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, var(--bg), transparent 22%, transparent 78%, var(--bg));
}

/* Nome sujo: sinal de restrição e caminho para uma nova análise. */
#limpa-nome .split__text .kicker { color: #f0d39a; }
#limpa-nome .split__text .title { max-width: 13ch; font-size: clamp(36px, 4.6vw, 58px); }
#limpa-nome .split__visual { perspective: 1200px; }
#limpa-nome .status-card {
  background: linear-gradient(145deg, rgba(31,28,26,.98), rgba(17,17,19,.98));
  border-color: rgba(214,178,94,.25); box-shadow: 0 26px 80px -35px #000, 0 0 60px -42px rgba(214,178,94,.6);
  transition: transform .65s var(--ease), box-shadow .65s, border-color .4s;
}
#limpa-nome .status-card__head { flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-bottom: 26px; }
#limpa-nome .status-card__head::before {
  content: "!"; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; color: #ffb0a1; background: rgba(230,114,92,.09); border: 1px solid rgba(230,114,92,.32);
  font-size: 24px; line-height: 1; font-weight: 600;
}
#limpa-nome .status-card__head > .ic { margin-left: auto; color: var(--gold); }
#limpa-nome .status-card__label { letter-spacing: .075em; font-size: 12px; }
#limpa-nome .status-row { min-height: 68px; transition: border-color .35s, background .35s, transform .4s var(--ease); }
#limpa-nome .status-row--bad { background: rgba(205,87,72,.07); border-color: rgba(226,111,96,.22); }
#limpa-nome .status-row--bad b { color: #f6a093; }
#limpa-nome .status-row--bad b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ed8c7b; box-shadow: 0 0 0 4px rgba(237,140,123,.08); }
#limpa-nome .status-row--good { background: linear-gradient(110deg, rgba(214,178,94,.13), rgba(214,178,94,.025)); border-color: rgba(214,178,94,.45); }
#limpa-nome .status-line { position: relative; padding: 10px 0; }
#limpa-nome .status-line span { height: 36px; }
#limpa-nome .status-line::after { content: ""; position: absolute; top: 16px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 14px rgba(214,178,94,.65); }
#limpa-nome .checklist li .ic { transition: transform .35s var(--ease), box-shadow .35s; }

/* Retrato com abertura sutil da moldura e reflexo luminoso. */
.about__media { isolation: isolate; }
.about__media::before { transition: transform .65s var(--ease), border-color .65s, box-shadow .65s; }
.about__frame { transition: transform .65s var(--ease), border-color .65s, box-shadow .65s; transform-origin: center; }
.about__frame::before {
  content: ""; position: absolute; inset: -25%; z-index: 2; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(246,231,184,.16) 47%, transparent 59%);
  transform: translateX(-85%); transition: transform 1.1s var(--ease);
}
.about__frame img { transition: transform 1s var(--ease), filter .65s; }
.about__insta { z-index: 3; transition: background .3s, border-color .3s, box-shadow .3s; }
.pillar { position: relative; isolation: isolate; transition: transform .45s var(--ease), border-color .4s, box-shadow .4s, background .4s; }
.pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(ellipse at 50% 0, rgba(214,178,94,.12), transparent 75%); opacity: 0; transition: opacity .4s; }
.pillar__icon .ic { transition: transform .45s var(--ease); }

/* Passos: expansão discreta e halo atrás de cada bloco. */
.step { isolation: isolate; transform-origin: center; transition: transform .45s var(--ease), border-color .4s, box-shadow .45s, background .4s; }
.step::after { content: ""; position: absolute; inset: 12px; z-index: -2; border-radius: inherit; box-shadow: 0 0 55px 7px rgba(214,178,94,.23); opacity: 0; transition: opacity .5s; pointer-events: none; }
.step::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(ellipse at 50% 0%, rgba(214,178,94,.15), transparent 74%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.step__icon { transition: transform .5s var(--ease), background .4s, box-shadow .4s; }
.step__num { color: #8c7a54; transition: color .3s; }
.step:focus-within, .pillar:focus-within { border-color: var(--gold); box-shadow: 0 20px 55px -32px rgba(214,178,94,.5); }

@media (hover: hover) and (pointer: fine) {
  .nav a:not(.btn):hover { transform: translateY(-1px); }
  #limpa-nome .status-card:hover { transform: translateY(-7px) rotateY(-3deg) rotateX(1deg); border-color: rgba(214,178,94,.48); box-shadow: 0 34px 80px -35px #000, 0 0 70px -38px rgba(214,178,94,.42); }
  #limpa-nome .status-card:hover .status-row--good { transform: translateY(-2px); }
  #limpa-nome .checklist li:hover .ic { transform: scale(1.12); box-shadow: 0 0 15px rgba(214,178,94,.22); }
  .about__media:hover::before { transform: translate(-5px,-5px) rotate(-2deg); border-color: rgba(214,178,94,.65); box-shadow: 0 0 45px -18px rgba(214,178,94,.3); }
  .about__media:hover .about__frame { transform: translate(3px,-3px) rotate(1deg); border-color: rgba(214,178,94,.65); box-shadow: 0 30px 65px -30px #000, 0 0 55px -34px rgba(214,178,94,.6); }
  .about__media:hover .about__frame::before { transform: translateX(75%); }
  .about__media:hover .about__frame img { transform: scale(1.035); filter: brightness(1.05); }
  .pillar:hover { transform: translateY(-7px); border-color: rgba(214,178,94,.5); box-shadow: 0 18px 45px -25px rgba(214,178,94,.28); }
  .pillar:hover::before { opacity: 1; }
  .pillar:hover .pillar__icon .ic { transform: translateY(-2px) rotate(-7deg); }
  .step:hover { z-index: 2; transform: translateY(-9px) scale(1.035); border-color: rgba(214,178,94,.58); background: #1b1915; box-shadow: 0 22px 55px -28px rgba(0,0,0,.8); }
  .step:hover::before, .step:hover::after { opacity: 1; }
  .step:hover .step__icon { transform: translateY(-4px) scale(1.08); background: #272115; box-shadow: 0 0 0 7px rgba(214,178,94,.045); }
  .step:hover .step__num { color: var(--gold-soft); }
}

/* Contato em forma de envelope. Estados nativos complementados ao final. */
#contato { padding-top: 88px; padding-bottom: 96px; }
.contact-heading { text-align: center; max-width: 650px; margin: 0 auto 28px; }
.contact-heading .text { margin-inline: auto; }
.contact-envelope { position: relative; max-width: 980px; margin: 0 auto; padding: 0 34px 34px; isolation: isolate; }
.envelope-shell { position: absolute; left: 0; right: 0; top: 110px; bottom: 0; z-index: -2; border: 1px solid rgba(214,178,94,.32); border-radius: 22px; background: linear-gradient(145deg, #282215, #171511 70%); box-shadow: 0 36px 90px -55px #000; pointer-events: none; }
.envelope-shell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(32deg, rgba(214,178,94,.08) 49.8%, transparent 50.2%), linear-gradient(-32deg, rgba(214,178,94,.06) 49.8%, transparent 50.2%); }
.envelope-flap { position: absolute; left: 0; right: 0; top: 110px; height: 180px; z-index: -1; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #43351e, #211c13); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: center top; transform: perspective(1000px) rotateX(0deg); transition: transform .85s var(--ease), opacity .65s; pointer-events: none; }
.envelope-trigger { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 0 auto 70px; min-height: 54px; padding: 13px 22px; border: 1px solid rgba(214,178,94,.4); border-radius: 999px; background: #151411; color: var(--gold-soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .3s, box-shadow .3s, border-color .3s; }
.envelope-trigger .ic { width: 22px; height: 22px; }
.envelope-trigger:hover, .envelope-trigger:focus-visible { border-color: var(--gold); background: #252015; box-shadow: 0 0 32px -18px rgba(214,178,94,.65); }
.envelope-trigger__arrow { margin-left: 3px; font-size: 20px; transition: transform .4s; }
.envelope-letter { position: relative; z-index: 1; max-width: 850px; margin: 0 auto; padding: 45px clamp(22px,5vw,65px) 42px; text-align: center; border: 1px solid rgba(214,178,94,.28); border-radius: 20px; background: linear-gradient(155deg, #23211c, #161615 70%); box-shadow: 0 10px 40px -26px #000; transform: translateY(16px) scale(.985); transform-origin: center bottom; transition: transform .75s var(--ease), box-shadow .75s, border-color .5s; }
.envelope-letter::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, #e9cf8c, transparent); pointer-events: none; }
.envelope-letter .kicker { font-size: 11px; letter-spacing: .18em; }
.envelope-letter .title { font-size: clamp(29px, 4vw, 46px); max-width: 18ch; margin-inline: auto; }
.envelope-letter .text { font-size: 16px; max-width: 50ch; margin: 0 auto 6px; }
.envelope-letter .cta__phone { margin: 16px 0 27px; }
.envelope-letter .cta__actions { gap: 12px; }
.envelope-letter .btn { font-size: 14px; }
.envelope-note { margin-top: 23px; font-size: 12px; color: #b4ad9d; display: flex; align-items: center; justify-content: center; gap: 7px; }
.envelope-note .ic { width: 14px; height: 14px; color: var(--gold); }


@media (max-width: 920px) {
  .nav a:not(.btn)::before { inset: 5px 0; border-radius: 9px; }
  .nav a:not(.btn):is(:hover, :focus-visible, .is-active) { padding-left: 16px; }
  #limpa-nome .split__text .title { max-width: 16ch; }
  .contact-envelope { padding-inline: 20px; }
  .envelope-letter { padding-inline: 28px; }
}
@media (max-width: 600px) {
  #limpa-nome .split__text .title { font-size: clamp(32px,9vw,44px); }
  #limpa-nome .status-card__label { font-size: 10.5px; }
  #limpa-nome .status-card__head { gap: 9px; }
  #limpa-nome .status-card__head::before { width: 36px; height: 36px; font-size: 20px; }
  #limpa-nome .status-row { min-height: 62px; gap: 8px; }
  #limpa-nome .status-row span { font-size: 11.5px; }
  #limpa-nome .status-row b { font-size: 12px; gap: 5px; }
  .step { min-height: 190px; }
  #contato { padding-top: 64px; padding-bottom: 64px; }
  .contact-envelope { padding: 0 10px 20px; }
  .envelope-shell { top: 104px; border-radius: 18px; }
  .envelope-flap { top: 104px; height: 100px; }
  .envelope-trigger { font-size: 12px; gap: 8px; padding: 12px 15px; margin-bottom: 54px; max-width: 100%; }
  .envelope-trigger .ic { width: 19px; height: 19px; }
  .envelope-letter { padding: 30px 18px; border-radius: 16px; }
  .envelope-letter .kicker { font-size: 9px; letter-spacing: .14em; }
  .envelope-letter .title { font-size: clamp(27px,7.5vw,34px); }
  .envelope-letter .text { font-size: 14px; line-height: 1.6; }
  .envelope-letter .cta__phone { font-size: clamp(20px,5.5vw,25px); gap: 7px; }
  .envelope-letter .cta__phone-icon { width: 35px; height: 35px; }
  .envelope-letter .cta__phone-icon .ic { width: 17px; height: 17px; }
  .envelope-letter .cta__actions { flex-direction: column; }
  .envelope-letter .btn { width: 100%; font-size: 13px; padding-inline: 14px; }
  .envelope-note { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a, .status-card, .about__media::before, .about__frame, .about__frame img, .about__frame::before, .pillar, .step, .step__icon, .envelope-letter, .envelope-flap { transition: none !important; animation: none !important; }
  .about__media:hover .about__frame, .about__media:hover::before, .about__media:hover .about__frame img, .step:hover, .step:hover .step__icon, .pillar:hover, #limpa-nome .status-card:hover { transform: none; }
  .about__frame::before { display: none; }
  .envelope-letter, .contact-envelope[open] .envelope-letter { transform: none; }
  .envelope-flap { opacity: .3; }
}

.restriction-emblem { display:flex; align-items:center; gap:16px; margin-bottom:26px; padding-bottom:24px; border-bottom:1px solid rgba(237,140,123,.18); }
.restriction-emblem > .ic { width:64px; height:64px; padding:14px; color:#efaa98; background:rgba(205,87,72,.09); border:1px solid rgba(237,140,123,.28); border-radius:20px; }
.restriction-emblem > span { font-size:11px; color:#a7a2a0; letter-spacing:.1em; }
.restriction-emblem strong { display:block; font-size:23px; color:#f3c1ad; letter-spacing:-.03em; font-weight:600; margin-top:4px; }
#limpa-nome .status-card__head::before { display:none; }
@media(prefers-reduced-motion:reduce) { .envelope-trigger__arrow { transition:none; } }

/* Envelope nativo: toque, clique e teclado funcionam mesmo sem JavaScript. */
details.contact-envelope {
  display: block;
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 34px 18px;
  isolation: isolate;
}
details.contact-envelope > summary.envelope-trigger {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  min-height: 54px;
  margin: 0 auto;
  padding: 13px 22px;
  border: 1px solid rgba(214,178,94,.4);
  border-radius: 999px;
  background: #151411;
  color: var(--gold-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: rgba(214,178,94,.12);
}
details.contact-envelope > summary.envelope-trigger::-webkit-details-marker { display: none; }
details.contact-envelope > summary.envelope-trigger::marker { content: ""; }
details.contact-envelope > summary.envelope-trigger:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 5px;
  border-color: var(--gold);
  box-shadow: 0 0 28px -14px rgba(214,178,94,.55);
}
details.contact-envelope > summary.envelope-trigger .envelope-trigger__label--closed { display: inline; }
details.contact-envelope > summary.envelope-trigger .envelope-trigger__label--open { display: none; }
details.contact-envelope > summary.envelope-trigger .ic { flex-shrink: 0; }
details.contact-envelope > summary.envelope-trigger .envelope-trigger__arrow {
  flex-shrink: 0;
  transform: none;
  transition: transform .35s var(--ease);
}
details.contact-envelope:not([open]) > .envelope-shell,
details.contact-envelope:not([open]) > .envelope-flap,
details.contact-envelope:not([open]) > .envelope-letter { display: none; }

details.contact-envelope[open] { padding-bottom: 34px; }
details.contact-envelope[open] > summary.envelope-trigger { margin-bottom: 70px; }
details.contact-envelope[open] > summary.envelope-trigger .envelope-trigger__label--closed { display: none; }
details.contact-envelope[open] > summary.envelope-trigger .envelope-trigger__label--open { display: inline; }
details.contact-envelope[open] > summary.envelope-trigger .envelope-trigger__arrow { transform: rotate(-90deg); }
details.contact-envelope[open] > .envelope-shell { display: block; }
details.contact-envelope[open] > .envelope-flap {
  display: block;
  transform: perspective(1000px) rotateX(155deg);
  transform-origin: center top;
  opacity: .65;
  animation: contact-flap-open .8s var(--ease) both;
}
details.contact-envelope[open] > .envelope-letter {
  display: block;
  transform: translateY(-14px) scale(1);
  border-color: rgba(214,178,94,.5);
  box-shadow: 0 30px 70px -35px #000, 0 0 55px -38px rgba(214,178,94,.55);
  opacity: 1;
  animation: contact-letter-open .75s var(--ease) both;
}
@keyframes contact-letter-open {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: translateY(-14px) scale(1); }
}
@keyframes contact-flap-open {
  from { transform: perspective(1000px) rotateX(0deg); opacity: 1; }
  to { transform: perspective(1000px) rotateX(155deg); opacity: .65; }
}
@media (max-width:920px) {
  details.contact-envelope { padding-inline: 20px; }
}
@media (max-width:600px) {
  details.contact-envelope { padding: 0 10px 12px; }
  details.contact-envelope > summary.envelope-trigger { gap: 8px; font-size: 12px; padding: 12px 15px; }
  details.contact-envelope[open] { padding-bottom: 20px; }
  details.contact-envelope[open] > summary.envelope-trigger { margin-bottom: 54px; }
}
@media (prefers-reduced-motion:reduce) {
  details.contact-envelope > summary.envelope-trigger,
  details.contact-envelope > summary.envelope-trigger .envelope-trigger__arrow,
  details.contact-envelope[open] > .envelope-flap,
  details.contact-envelope[open] > .envelope-letter {
    animation: none !important;
    transition: none !important;
  }
  details.contact-envelope[open] > .envelope-letter { transform: none; opacity: 1; }
  details.contact-envelope[open] > .envelope-flap { opacity: .3; }
}
