body{
  margin:0;
  background:var(--gray);
}

/* HERO */
.hero{
  margin-top: 80px;
  background:linear-gradient(rgba(227, 130, 12, 0.548), rgba(210, 104, 18, 0.703)), url('../../img/template.png');
  background-size:cover;
  background-position:center;
  color:var(--secondary);
  padding:120px 20px;
  text-align:center;
}

.hero h2{
  font-size:2.8em;
  margin-bottom:10px;
}

.hero p{
  opacity:0.9;
  margin-bottom:20px;
}

.btn{
  background:black;
  color:var(--secondary);
  padding:12px 25px;
  border-radius:30px;
  text-decoration:none;
  transition:0.3s;
  font-weight:bold;
}

.btn:hover{
  opacity:0.85;
}

/* CONTAINER */
.container{
  padding:60px 20px;
  max-width:1100px;
  margin:auto;
}

/* SECTION */
.section{
  margin-bottom:60px;
  background:var(--secondary);
  padding:30px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  position:relative;
  overflow:hidden;
}

/* ELEMENTO DECORATIVO COM SUA IMAGEM */
.section::before{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  background:url('img/CORRIDA.png');
  background-size:cover;
  opacity:0.04;
  top:-40px;
  right:-40px;
  border-radius:50%;
}

/* TITULOS */
.section h2{
  margin-bottom:20px;
  color:var(--primary);
}

.section h2::after{
  content:"";
  width:50px;
  height:4px;
  background:var(--accent);
  display:block;
  margin-top:5px;
  border-radius:5px;
}

/* TEXTO */
.section p{
  line-height:1.6;
  margin-bottom:15px;
  color:#333;
}

.section p strong{
  color:var(--primary);
}

/* LISTA */
.list{
  margin-top:10px;
  padding-left:20px;
}

.list li{
  margin-bottom:8px;
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:20px;
}

.card{
  background:var(--secondary);
  border-radius:15px;
  padding:25px;
  text-align:center;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  transition:0.3s;
  border-top:4px solid var(--accent);
}

.card:hover{
  transform:translateY(-8px) scale(1.02);
}

.card img{
  width:90px;
  height:90px;
  border-radius:50%;
  margin-bottom:10px;
  object-fit:cover;
  border:3px solid var(--accent);
}

.card p strong{
  color:var(--primary);
}

/* RESPONSIVO */
@media (max-width:768px){
  .hero{
    margin-top: 0px;
  }
  .hero h2{
    font-size:2em;
  }

  .section{
    padding:20px;
  }
}

.gallery{
  padding:60px 20px;
  max-width:1100px;
  margin:auto;
  text-align:center;
}

.gallery h2{
  color:var(--primary);
  margin-bottom:30px;
}

/* GRID MODERNO */
.grid-gallery{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:200px 200px;
  gap:15px;
  grid-auto-rows:200px;
}

/* ITENS */
.grid-item{
  overflow:hidden;
  border-radius:15px;
  position:relative;
  cursor:pointer;
}

.grid-item:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

.grid-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.4s;
}

@media (hover: hover){
  .grid-item:hover img{
    transform:scale(1.08);
  }
}

.grid-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:12px 14px;
  text-align:left;
  background:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 35%, rgba(10,10,10,0.82) 100%);
  border-top:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.grid-caption-title{
  color:var(--secondary);
  font-weight:800;
  letter-spacing:0.2px;
  font-size:1.05em;
  line-height:1.1;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.grid-caption-date{
  color:rgba(255,255,255,0.86);
  font-size:0.92em;
}

.grid-item.is-active .grid-caption{
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
}

.grid-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  padding:14px;
  background:linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.65) 45%, rgba(28,28,28,0.92) 100%);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  pointer-events:none;
}

.grid-item.is-active .grid-overlay{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.grid-overlay-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}

.grid-title{
  color:var(--secondary);
  font-size:1.15em;
  line-height:1.05;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.grid-date{
  color:rgba(255,255,255,0.88);
  font-size:0.95em;
}

.grid-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.grid-link{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:var(--accent);
  color:var(--secondary);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.2px;
  transition:0.2s;
}

.grid-link:hover{
  opacity:0.9;
}

.grid-toggle{
  width:38px;
  height:38px;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.22);
  color:var(--secondary);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:0.2s;
}

.grid-toggle:hover{
  background:rgba(255,255,255,0.22);
}

.grid-toggle::after{
  content:"▼";
  font-size:16px;
  line-height:1;
}

.grid-item.is-open .grid-toggle::after{
  content:"▲";
}

.grid-desc{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.95);
  line-height:1.35;
  font-size:0.95em;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.25s ease;
}

.grid-item.is-open .grid-desc{
  max-height:130px;
  overflow:auto;
}

.grid-item.is-open .grid-overlay{
  overflow:auto;
  justify-content:flex-start;
}

/* IMAGEM GRANDE */
.grid-item.big{
  grid-row:1 / 3;
}

/* RESPONSIVO */
@media(max-width:768px){
  .grid-gallery{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .grid-item.big{
    grid-row:auto;
  }

  .grid-item{
    height:200px;
  }
}

.faq{
  padding:60px 20px;
  max-width:900px;
  margin:auto;
}

.faq h2{
  text-align:center;
  color:var(--primary);
  margin-bottom:30px;
}

/* CONTAINER */
.faq-container{
  display:flex;
  flex-direction:column;
  gap:15px;
}
/* CARD */
.faq details{
  background:white;
  border-radius:12px;
  padding:18px 20px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  cursor:pointer;
  transition:0.3s;
  border-left:4px solid transparent;
}

.faq details[open]{
  border-left:4px solid var(--accent);
}

/* TITULO */
.faq summary{
  font-weight:bold;
  color:var(--primary);
  list-style:none;
  position:relative;
}

/* REMOVE SETINHA PADRÃO */
.faq summary::-webkit-details-marker{
  display:none;
}

/* SETA CUSTOM */
.faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  font-size:20px;
  transition:0.3s;
}

/* QUANDO ABRE */
.faq details[open] summary::after{
  content:"–";
}

/* TEXTO */
.faq p{
  margin-top:10px;
  color:#444;
  line-height:1.5;
}


.contact{
  padding:60px 20px;
  max-width:800px;
  margin:auto;
  text-align:center;
}

.contact h2{
  color:var(--primary);
  margin-bottom:30px;
}

/* FORM */
.contact-form{
  background:white;
  padding:30px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* GRUPO */
.form-group{
  text-align:left;
  display:flex;
  flex-direction:column;
}

/* LABEL */
.form-group label{
  margin-bottom:5px;
  font-weight:bold;
  color:var(--primary);
}

/* INPUTS */
.form-group input,
.form-group select,
.form-group textarea{
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  outline:none;
  transition:0.3s;
  font-size:14px;
}

/* FOCO */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,107,0,0.2);
}

/* BOTÃO */
.btn-submit{
  background:var(--accent);
  color:white;
  padding:14px;
  border:none;
  border-radius:30px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.btn-submit:hover{
  opacity:0.85;
}

/* RESPONSIVO */
@media(max-width:768px){
  .contact-form{
    padding:20px;
  }
}