/* ============================================================
   Agência Eleva HOF
   ============================================================ */

:root{
  --bg:          #241a14;
  --bg-deep:     #1a120d;
  --sand:        #b1aa97;
  --paper:       #f6f3ee;
  --text:        rgba(238, 232, 223, .70);
  --text-strong: rgba(250, 248, 244, .96);
  --rule:        rgba(214, 205, 190, .30);

  --shell:   34rem;   /* largura máxima do conteúdo */
  --gutter:  clamp(1.5rem, 6vw, 2.75rem);

  --track:   .10em;   /* entreletra padrão */
  --ease:    cubic-bezier(.22, .61, .36, 1);
}

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

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

body{
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: var(--track);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p{ margin: 0; }

strong{
  font-weight: 500;
  color: var(--text-strong);
}

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Topo ─────────────────────────────────────────────────── */

.hero{
  position: relative;
  padding-block: clamp(3rem, 13vw, 5.5rem) clamp(3.5rem, 15vw, 6rem);
  background-image:
    linear-gradient(to bottom,
      rgba(26, 18, 13, .55) 0%,
      rgba(26, 18, 13, .18) 30%,
      rgba(36, 26, 20, .35) 70%,
      var(--bg) 100%),
    url("assets/mountain.jpg");
  background-size: cover;
  background-position: 50% 22%;
  background-repeat: no-repeat;
}

.hero__logo{
  display: block;
  width: clamp(5rem, 21vw, 7rem);
  height: auto;
  margin: 0 auto clamp(3.25rem, 14vw, 5rem);
}

.hero__intro{
  font-size: clamp(.8rem, 3.5vw, .95rem);
  line-height: 1.95;
  text-align: justify;
  text-align-last: left;
  text-wrap: pretty;
}

/* ── Serviços ─────────────────────────────────────────────── */

.services{
  padding-block: 0 clamp(4rem, 16vw, 7rem);
}

.services__list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.service{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, 4.5vw, 1.35rem);
  border-bottom: 1px solid var(--rule);
  transition: border-color .5s var(--ease);
}

.service__name{
  font-size: clamp(.76rem, 3.2vw, .9rem);
  line-height: 1.7;
  letter-spacing: .11em;
  transition: color .45s var(--ease);
}

.service__num{
  flex: none;
  font-size: clamp(.76rem, 3.2vw, .9rem);
  letter-spacing: .06em;
  color: var(--text);
  transition: color .45s var(--ease), transform .45s var(--ease);
}

@media (hover: hover){
  .service:hover{ border-bottom-color: rgba(214, 205, 190, .55); }
  .service:hover .service__name{ color: var(--text-strong); }
  .service:hover .service__num{
    color: var(--sand);
    transform: translateX(-.35rem);
  }
}

/* ── Contato ──────────────────────────────────────────────── */

.contact{
  padding-bottom: clamp(4rem, 16vw, 7rem);
}

.contact__stack{
  display: grid;
  grid-template-areas: "stack";
  align-items: stretch;
}

.contact__media,
.contact__lines{
  grid-area: stack;
}

.contact__media{
  align-self: end;
  width: 100%;
  height: 76%;
  background-image: url("assets/room.jpg");
  background-size: cover;
  background-position: 50% 62%;
}

.contact__lines{
  position: relative;
  z-index: 1;
  width: min(100%, 15.5em);
  margin-left: auto;
  margin-right: 4%;
  font-size: clamp(1.55rem, 8.2vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: .01em;
  color: var(--paper);
  font-weight: 400;
  text-shadow: 0 2px 18px rgba(20, 12, 8, .45);
}

.line{ display: flex; }
.line--split{ justify-content: space-between; }
.line--start{ justify-content: flex-start; }
.line--end{   justify-content: flex-end; }

.contact__link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .14em;
  text-decoration-thickness: from-font;
  transition: color .35s var(--ease), text-underline-offset .35s var(--ease);
}

.contact__link:hover,
.contact__link:focus-visible{
  color: var(--sand);
  text-underline-offset: .26em;
}

/* ── Rodapé ───────────────────────────────────────────────── */

.footer{
  padding-block: clamp(1.5rem, 6vw, 2.5rem) clamp(2rem, 8vw, 3rem);
  background-color: var(--bg-deep);
}

.footer__row{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: clamp(.55rem, 2.3vw, .62rem);
  letter-spacing: .2em;
  color: rgba(238, 232, 223, .45);
}

/* ── Foco visível ─────────────────────────────────────────── */

a:focus-visible{
  outline: 2px solid var(--sand);
  outline-offset: .4rem;
  border-radius: 2px;
}

/* ── Entrada ao rolar ─────────────────────────────────────── */

.reveal{
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal{
  transition:
    opacity   .9s var(--ease) var(--d, 0ms),
    transform .9s var(--ease) var(--d, 0ms);
}

.reveal.is-in,
html:not(.js) .reveal{
  opacity: 1;
  transform: none;
}

/* ── Telas maiores ────────────────────────────────────────── */

@media (min-width: 48rem){
  :root{ --shell: 38rem; }

  .hero{ background-position: 50% 30%; }

  .contact__lines{ margin-right: 6%; }
}

@media (min-width: 75rem){
  :root{ --shell: 42rem; }
}

/* ── Movimento reduzido ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1; transform: none; }
}