/* ===================================== */
/* HERO */
/* ===================================== */

.hero{

  height:360px;

  margin:16px;

  border-radius:18px;

  overflow:hidden;

  position:relative;

}

/* IMAGEM */

.hero-img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  filter:
  brightness(.8)
  contrast(1.05);

  animation:
  heroZoom 18s ease-in-out infinite alternate;

}

/* HERO MOTION */

@keyframes heroZoom{

  from{

    transform:
    scale(1);

  }

  to{

    transform:
    scale(1.04);

  }

}

/* OVERLAY */

.hero-overlay{

  position:absolute;

  inset:0;

  overflow:hidden;

  background:

linear-gradient(
  90deg,
  rgba(0,0,0,.92) 0%,
  rgba(0,0,0,.74) 28%,
  rgba(0,0,0,.28) 58%,
  rgba(0,0,0,.58) 100%
);

}

/* ILUMINAÇÃO */

.hero-overlay::before{

  content:"";

  width:620px;

  height:620px;

  border-radius:50%;

  position:absolute;

  top:-240px;

  left:-120px;

  background:

  radial-gradient(
    circle,
    rgba(200,160,103,.08) 0%,
    rgba(200,160,103,0) 72%
  );

  pointer-events:none;

}

/* LUZ SECUNDÁRIA */

.hero-overlay::after{

  content:"";

  width:420px;

  height:420px;

  border-radius:50%;

  position:absolute;

  bottom:-220px;

  right:-120px;

  background:

  radial-gradient(
    circle,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,0) 72%
  );

  pointer-events:none;

}

/* PARTÍCULAS */

.hero-overlay span{

  position:absolute;

  width:4px;

  height:4px;

  border-radius:50%;

  background:
  rgba(255,255,255,.16);

  animation:
  floating 10s linear infinite;

}

/* POSIÇÕES */

.hero-overlay span:nth-child(1){

  left:12%;

  top:78%;

  animation-delay:0s;

}

.hero-overlay span:nth-child(2){

  left:24%;

  top:66%;

  animation-delay:2s;

}

.hero-overlay span:nth-child(3){

  left:38%;

  top:82%;

  animation-delay:4s;

}

.hero-overlay span:nth-child(4){

  left:52%;

  top:74%;

  animation-delay:1s;

}

.hero-overlay span:nth-child(5){

  left:64%;

  top:80%;

  animation-delay:3s;

}

/* ANIMAÇÃO */

@keyframes floating{

  from{

    transform:
    translateY(0);

    opacity:0;

  }

  20%{

    opacity:1;

  }

  to{

    transform:
    translateY(-120px);

    opacity:0;

  }

}

/* CONTEÚDO */

.hero-content{

  position:absolute;

  left:56px;

  top:50%;

  transform:translateY(-50%);

  width:620px;

  z-index:2;

}

/* TÍTULO */

.hero-content h1{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:72px;

  line-height:.86;

  font-weight:500;

  letter-spacing:-1.4px;

  color:#f5efe8;

  text-shadow:

  0 6px 24px
  rgba(0,0,0,.52),

  0 0 34px
  rgba(255,255,255,.03);

}

/* TEXTO */

.hero-content p{

  width:470px;

  margin-top:20px;

  color:#ddd4ca;

  font-size:15px;

  line-height:1.7;

  text-shadow:

  0 2px 10px
  rgba(0,0,0,.34);

}

/* BUSCA */

.hero-search{

  width:505px;

  height:52px;

  margin-top:30px;

  padding-left:22px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-radius:999px;

  background:

  linear-gradient(
    180deg,
    rgba(255,255,255,.98) 0%,
    rgba(242,242,242,.98) 100%
  );

  box-shadow:

  0 14px 34px
  rgba(0,0,0,.24),

  inset 0 1px 0
  rgba(255,255,255,.75);

  transition:

  transform .35s ease,
  box-shadow .35s ease;

}

/* HOVER */

.hero-search:hover{

  transform:
  translateY(-1px);

  box-shadow:

  0 18px 42px
  rgba(0,0,0,.3),

  inset 0 1px 0
  rgba(255,255,255,.85);

}

/* INPUT */

.hero-search input{

  width:100%;

  border:none;

  outline:none;

  background:none;

  color:#222;

  font-size:13px;

  font-weight:500;

}

/* PLACEHOLDER */

.hero-search input::placeholder{

  color:#777;

}

/* BOTÃO */

.hero-search button{

  width:54px;

  height:54px;

  border:none;

  background:
rgba(0,0,0,.03);

  border-radius:50%;

  color:#444;

  font-size:15px;

  cursor:pointer;

}

/* FEATURED */

.featured{

  padding:18px 20px 0;

}

/* TOPO */

.section-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

}

/* TÍTULO */

.section-top h2{

  display:flex;

  align-items:center;

  gap:10px;

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:31px;

  line-height:1;

  font-weight:500;

  letter-spacing:-.3px;

  color:#f4eee7;

  text-shadow:

  0 0 18px
  rgba(200,160,103,.05);

}

/* ÍCONE */

.section-top h2 i{

  color:#d6b078;

  font-size:22px;

  text-shadow:

0 0 10px
rgba(200,160,103,.14);

}

/* VER TODOS */

.section-top a{

  color:#d6b078;

  text-decoration:none;

  font-size:14px;

  letter-spacing:.2px;

  position:relative;

  transition:

  color .35s ease,
  letter-spacing .35s ease,
  text-shadow .35s ease;

}

/* LINHA */

.section-top a::after{

  content:"";

  width:0;

  height:1px;

  position:absolute;

  left:0;

  bottom:-4px;

  background:

  linear-gradient(
    90deg,
    rgba(214,176,120,1) 0%,
    rgba(214,176,120,0) 100%
  );

  transition:
  width .35s ease;

}

/* HOVER */

.section-top a:hover{

  color:#e2bf8d;

  letter-spacing:.3px;

  text-shadow:

  0 0 12px
  rgba(214,176,120,.18);

}

.section-top a:hover::after{

  width:100%;

}

/* GRID */

.featured-grid{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:16px;

  margin-top:16px;

}

/* CARD */

.person-card{

  border-radius:14px;

  overflow:hidden;

  background:

linear-gradient(
  180deg,
  rgba(26,26,26,.98) 0%,
  rgba(14,14,14,.98) 100%
);

  border:1px solid
  rgba(255,255,255,.04);

  cursor:pointer;

  position:relative;

  transition:

  transform .55s cubic-bezier(.22,.61,.36,1),
  box-shadow .55s cubic-bezier(.22,.61,.36,1),
  border-color .55s cubic-bezier(.22,.61,.36,1);

}

/* BRILHO PREMIUM */

.person-card::before{

  content:"";

  width:180px;

  height:180px;

  border-radius:50%;

  position:absolute;

  top:-90px;

  right:-60px;

  background:

  radial-gradient(
    circle,
    rgba(200,160,103,.08) 0%,
    rgba(200,160,103,0) 72%
  );

  opacity:.7;

  transition:

  opacity .45s ease,
  transform .45s ease;

}

/* HOVER */

.person-card:hover::before{

  opacity:1;

  transform:
  scale(1.08);

}

/* HOVER */

.person-card:hover{

  transform:
  translateY(-8px);

  box-shadow:

  0 24px 50px
  rgba(0,0,0,.42),

  0 0 0 1px
  rgba(255,255,255,.04);

}

/* IMAGEM */

.card-image{

  height:208px;

  overflow:hidden;

  position:relative;

}

/* FOTO */

.card-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center 18%;

  display:block;

  filter:

  brightness(.88)
  contrast(1.08)
  saturate(.92);

  transition:

  transform 1.2s cubic-bezier(.22,.61,.36,1),
  filter 1.2s cubic-bezier(.22,.61,.36,1);

}

/* OVERLAY */

.card-overlay{

  position:absolute;

  inset:0;

  background:

  linear-gradient(
    to top,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.08) 55%,
    rgba(255,255,255,.02) 100%
  );

  transition:
  background .45s ease;

}

/* HOVER */

.person-card:hover .card-overlay{

  background:

  linear-gradient(
    to top,
    rgba(0,0,0,.48) 0%,
    rgba(0,0,0,.02) 55%,
    rgba(255,255,255,.08) 100%  
  );

}

/* HOVER FOTO */

.person-card:hover img{

  transform:
  scale(1.1);

  filter:

  brightness(.98)
  contrast(1.12)
  saturate(1);

}

/* INFO */

.card-info{

  padding:14px;

}

/* NOME */

.card-info h3{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:22px;

  line-height:1.05;

  letter-spacing:-.4px;

  font-weight:500;

  color:#f2ece4;

}

/* DATAS */

.card-info p{

  margin-top:6px;

  color:#a7a19a;

  font-size:13px;

  letter-spacing:.3px;

}

/* HOMENAGENS */

.card-info span{

  display:flex;

  align-items:center;

  gap:7px;

  margin-top:12px;

  color:#cfb182;

  font-size:13px;

  letter-spacing:.2px;

}

/* ===================================== */
/* HOME ROW */
/* ===================================== */

.home-row{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:20px;

  padding:28px 20px 0;

}

/* BOXES */

.recent-box,
.history-box{

  padding:22px;

  border-radius:14px;

  background:

linear-gradient(
  180deg,
  rgba(28,28,28,.98) 0%,
  rgba(14,14,14,.98) 100%
);

  border:1px solid
  rgba(255,255,255,.04);

  position:relative;

  overflow:hidden;

  box-shadow:

0 12px 28px
rgba(0,0,0,.22),

inset 0 1px 0
rgba(255,255,255,.03);

  transition:

  transform .4s ease,
  box-shadow .4s ease,
  border-color .4s ease;

}

/* BRILHO SUAVE */

.recent-box::before,
.history-box::before{

  content:"";

  width:180px;

  height:180px;

  border-radius:50%;

  position:absolute;

  top:-90px;

  right:-80px;

  background:

  radial-gradient(
    circle,
    rgba(200,160,103,.05) 0%,
    rgba(200,160,103,0) 72%
  );

  pointer-events:none;

}

/* HOVER */

.recent-box:hover,
.history-box:hover{

  transform:
  translateY(-5px);

  box-shadow:

  0 26px 48px
  rgba(0,0,0,.34);

  border-color:
  rgba(255,255,255,.06);

}

/* TÍTULO */

.small-title{

  display:flex;

  align-items:center;

  gap:10px;

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:31px;

  line-height:1;

  font-weight:500;

  letter-spacing:-.3px;

  color:#f4eee7;

  text-shadow:

  0 0 18px
  rgba(200,160,103,.05);

}

/* ÍCONE */

.small-title i{

  color:#d6b078;

  font-size:22px;

  text-shadow:

  0 0 14px
  rgba(200,160,103,.22);

}

/* LINHA */

.recent-box .small-title,
.history-box .section-top{

  padding-bottom:14px;

  border-bottom:1px solid
  rgba(255,255,255,.04);

  position:relative;

}

/* BRILHO */

.recent-box .small-title::after,
.history-box .section-top::after{

  content:"";

  width:120px;

  height:1px;

  position:absolute;

  left:0;

  bottom:-1px;

  background:

  linear-gradient(
    90deg,
    rgba(200,160,103,.35) 0%,
    rgba(200,160,103,0) 100%
  );

}

/* ITEM */

.recent-item{

  display:flex;

  gap:14px;

  margin-top:18px;

}

/* ÍCONE */

.recent-icon{

  width:18px;

  color:#c8a067;

  font-size:15px;

}

/* TEXTO */

.recent-content p{

  color:#f1f1f1;

  font-size:14px;

  line-height:1.55;

}

/* TEMPO */

.recent-content small{

  display:block;

  margin-top:5px;

  color:#9f9a94;

  font-size:13px;

}

/* ===================================== */
/* HISTORY */
/* ===================================== */

.history-columns{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:24px;

  margin-top:20px;

}

/* COLUNA */

.history-column{

  position:relative;

}

/* LINHA */

.history-column:first-child::after{

  content:"";

  width:1px;

  height:100%;

  position:absolute;

  top:0;

  right:-12px;

  background:

  linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 20%,
    rgba(255,255,255,.08) 80%,
    rgba(255,255,255,0) 100%
  );

}

/* SUBTÍTULO */

.history-column h3{

  color:#c8a067;

  font-size:18px;

  font-weight:500;

}

/* LISTA */

.history-people{

  list-style:none;

  margin-top:16px;

}

/* ITEM */

.history-people li{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:16px;

  transition:
  transform .35s ease;

}

/* HOVER */

.history-people li:hover{

  transform:
  translateX(4px);

}

/* FOTO */

.history-people img{

  width:40px;

  height:40px;

  border-radius:50%;

  object-fit:cover;

  border:1px solid
  rgba(255,255,255,.08);

  box-shadow:

  0 4px 12px
  rgba(0,0,0,.28),

  0 0 0 1px
  rgba(200,160,103,.05);

  transition:

  transform .35s ease,
  box-shadow .35s ease,
  border-color .35s ease;

}

/* HOVER */

.history-people li:hover img{

  transform:
  scale(1.06);

  border-color:
  rgba(200,160,103,.18);

  box-shadow:

  0 8px 18px
  rgba(0,0,0,.34),

  0 0 18px
  rgba(200,160,103,.08);

}

/* TEXTO */

.history-people li div{

  color:#f1f1f1;

  font-size:15px;

  line-height:1.45;

}

/* DATAS */

.history-people span{

  color:#8d8d8d;

  font-size:13px;

}

/* CATEGORIAS */

.categories{

  padding:38px 20px 0;

}

/* TÍTULO */

.categories-title{

  display:flex;

  align-items:center;

  gap:10px;

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:31px;

  line-height:1;

  font-weight:500;

  letter-spacing:-.3px;

  color:#f4eee7;

  text-shadow:

  0 0 18px
  rgba(200,160,103,.05);

}

/* ÍCONE */

.categories-title i{

  color:#d6b078;

  font-size:22px;

  text-shadow:

  0 0 14px
  rgba(200,160,103,.22);

}

/* GRID */

.categories-grid{

  display:grid;

  grid-template-columns:
  repeat(6,1fr);

  gap:16px;

  margin-top:16px;

}

/* CARD */

.category-card{

  height:118px;

  border-radius:14px;

  background:

linear-gradient(
  180deg,
  rgba(30,30,30,.98) 0%,
  rgba(15,15,15,.98) 100%
);

  border:1px solid
  rgba(255,255,255,.04);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  position:relative;

  overflow:hidden;

  transition:

  transform .5s cubic-bezier(.22,.61,.36,1),
  box-shadow .5s cubic-bezier(.22,.61,.36,1),
  border-color .5s cubic-bezier(.22,.61,.36,1),
  background .5s cubic-bezier(.22,.61,.36,1);

}

/* BRILHO */

.category-card::before{

  content:"";

  width:120px;

  height:120px;

  border-radius:50%;

  position:absolute;

  top:-60px;

  right:-40px;

  background:

  radial-gradient(
    circle,
    rgba(200,160,103,.08) 0%,
    rgba(200,160,103,0) 70%
  );

  transition:
  opacity .35s ease;

}

/* HOVER */

.category-card:hover::before{

  opacity:1;

}

/* HOVER */

.category-card:hover{

  transform:
  translateY(-4px);

  background:

  linear-gradient(
    180deg,
    rgba(28,28,28,.98) 0%,
    rgba(12,12,12,.98) 100%
  );

  box-shadow:

  0 22px 38px
  rgba(0,0,0,.34);

  border-color:
  rgba(200,160,103,.14);

}

/* ÍCONE */

.category-icon{

  color:#d6b078;

  font-size:26px;

  text-shadow:

  0 0 16px
  rgba(200,160,103,.18);

}

/* NOME */

.category-card h3{

  margin-top:12px;

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:25px;

  font-weight:500;

  color:#f2ece4;

}

/* TEXTO */

.category-card p{

  margin-top:4px;

  color:#8d8d8d;

  font-size:12px;

}

/* ===================================== */
/* MEMORIAL */
/* ===================================== */

.memorial-cta{

  height:220px;

  margin:28px 16px 0;

  border-radius:18px;

  overflow:hidden;

  position:relative;

}

/* IMAGEM */

.memorial-bg{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  filter:
  brightness(.78)
  contrast(1.05);

}

/* OVERLAY */

.memorial-overlay{

  position:absolute;

  inset:0;

  background:
  rgba(0,0,0,.54);

}

/* CONTEÚDO */

.memorial-content{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:20px;

}

/* TÍTULO */

.memorial-content h2{

  max-width:1000px;

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:48px;

  line-height:1;

  font-weight:500;

  color:#f2ece4;

}

/* TEXTO */

.memorial-content p{

  max-width:470px;

  margin-top:12px;

  color:#d4ccc2;

  font-size:14px;

  line-height:1.7;

}

/* BOTÃO */

.memorial-content a{

  width:220px;

  height:62px;

  margin-top:24px;

  border-radius:999px;

  background:
  linear-gradient(
    180deg,
    #d6b078 0%,
    #b8945a 100%
  );

  color:#161616;

  text-decoration:none;

  font-size:15px;

  font-weight:600;

  display:flex;

  align-items:center;

  justify-content:center;

  box-shadow:

  0 10px 24px
  rgba(184,148,90,.24),

  inset 0 1px 0
  rgba(255,255,255,.24);

  transition:

  transform .35s ease,
  box-shadow .35s ease,
  filter .35s ease;

}

/* HOVER */

.memorial-content a:hover{

  transform:
  translateY(-2px);

  filter:
  brightness(1.04);

  box-shadow:

  0 18px 34px
  rgba(184,148,90,.32),

  inset 0 1px 0
  rgba(255,255,255,.3);

}

/* ===================================== */
/* FAQ */
/* ===================================== */

.faq-section{

  margin:42px 20px 0;

  padding:26px;

  border-radius:18px;

  background:

  linear-gradient(
    180deg,
    rgba(18,18,18,.98) 0%,
    rgba(11,11,11,.98) 100%
  );

  border:1px solid
  rgba(255,255,255,.04);

  position:relative;

  overflow:hidden;

}

/* LISTA */

.faq-list{

  margin-top:18px;

}

/* ITEM */

.faq-item{

  border-bottom:1px solid
  rgba(255,255,255,.05);

  transition:
  border-color .35s ease;

}

/* HOVER */

.faq-item:hover{

  border-color:
  rgba(200,160,103,.14);

}

/* SUMMARY */

.faq-item summary{

  padding:20px 18px;

  list-style:none;

  cursor:pointer;

  position:relative;

  color:#f1f1f1;

  font-size:15px;

  font-weight:500;

  transition:

  color .35s ease,
  padding-left .35s ease;

}

/* HOVER */

.faq-item:hover summary{

  color:#d6b078;

  padding-left:6px;

}

/* REMOVE SETA */

.faq-item summary::-webkit-details-marker{

  display:none;

}

/* + */

.faq-item summary::after{

  content:"+";

  position:absolute;

  right:0;

  top:18px;

  color:#c8a067;

  font-size:20px;

  transition:

  transform .35s ease,
  color .35s ease;

}

/* HOVER */

.faq-item:hover summary::after{

  color:#d6b078;

} 

/* ABERTO */

.faq-item[open] summary{

  color:#d6b078;

}

.faq-item[open] summary::after{

  transform:rotate(45deg);

  color:#d6b078;

}

/* TEXTO */

.faq-item p{

  padding:0 48px 22px 34px;

  color:#bdbdbd;

  font-size:14px;

  line-height:1.8;

  animation:
  faqFade .35s ease;

}

/* ANIMAÇÃO */

@keyframes faqFade{

  from{

    opacity:0;

    transform:
    translateY(-4px);

  }

  to{

    opacity:1;

    transform:
    translateY(0);

  }

}

/* ===================================== */
/* COOKIES */
/* ===================================== */

.cookie-overlay{

  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,.42);

  z-index:999999;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  padding:0 20px 28px;

}

/* BOX */

.cookie-box{

  width:640px;

  padding:24px 28px;

  border-radius:18px;

  background:

  rgba(18,18,18,.96);

  border:1px solid
  rgba(255,255,255,.06);

  text-align:center;

  box-shadow:

  0 18px 40px
  rgba(0,0,0,.35);

}

/* TEXTO */

.cookie-box p{

  color:#d7d7d7;

  font-size:15px;

  line-height:1.75;

}

/* LINK */

.cookie-box p a{

  color:#c8a067;

  text-decoration:none;

}

/* BOTÃO */

.cookie-box button{

  width:190px;

  height:56px;

  margin-top:24px;

  border:none;

  border-radius:999px;

  background:

  linear-gradient(
    180deg,
    #d6b078 0%,
    #b8945a 100%
  );

  color:#161616;

  font-size:15px;

  font-weight:600;

  cursor:pointer;

  box-shadow:

  0 10px 24px
  rgba(184,148,90,.22),

  inset 0 1px 0
  rgba(255,255,255,.24);

  transition:

  transform .35s ease,
  box-shadow .35s ease,
  filter .35s ease;

}

/* HOVER */

.cookie-box button:hover{

  transform:
  translateY(-2px);

  filter:
  brightness(1.04);

}

/* ===================================== */
/* ANIMAÇÕES */
/* ===================================== */

.featured,
.home-row,
.categories,
.faq-section,
.memorial-cta,
.footer{

  animation:
  fadeUp .9s ease forwards;

}

/* DELAYS */

.home-row{

  animation-delay:.08s;

}

.categories{

  animation-delay:.16s;

}

.faq-section{

  animation-delay:.24s;

}

.memorial-cta{

  animation-delay:.32s;

}

.footer{

  animation-delay:.4s;

}

/* KEYFRAMES */

@keyframes fadeUp{

  from{

    opacity:0;

    transform:
    translateY(26px);

  }

  to{

    opacity:1;

    transform:
    translateY(0);

  }

}