/* custom.css */

/* -----------------------------------------------------------
   Ressoar – Grupo de Estudos e Reflexões Gestálticas
   custom.css – integrado com Swiper.js para slider
   ----------------------------------------------------------- */

/* Garet‑Book */
@font-face{
  font-family:"Garet";
  src:url("assets/fonts/garet/Garet-Book.woff2") format("woff2"),
      url("assets/fonts/garet/Garet-Book.ttf")   format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Paleta */
:root{
  --teal-dark:#0f585d;
  --teal-medium:#5d7d83;
  --teal-light:#b9d1d1;
  --aqua-wash:rgba(147,176,176,.28);
  --yellow-wash:rgba(243,234,188,.30);
  --off-white:#fbfaf7;
  --gray-700:#444;
  --btn-bg:#0f585d;
  --btn-bg-hover:#0c474b;
}

/* Base */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html,body{
  width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
  font-family:"Garet",sans-serif;
  color:var(--teal-medium);
  background:var(--off-white);
  line-height:1.6;
}

/* Fundo aquarela + ondas */
body{
  background-image:
    repeating-radial-gradient(circle at 18% 20%,rgba(147,176,176,.07) 0 1px,transparent 2px 30px),
    repeating-radial-gradient(circle at 80% 85%,rgba(147,176,176,.05) 0 .8px,transparent 1.6px 28px),
    radial-gradient(circle at 25% 8%, var(--aqua-wash) 0%,transparent 72%),
    radial-gradient(circle at 15% 90%,var(--aqua-wash) 0%,transparent 78%),
    radial-gradient(circle at 85% 25%,var(--yellow-wash) 0%,transparent 78%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  position:relative;
}

/* Flor lateral */
body::after{
  content:"";
  position:fixed;
  top:12vh;
  right:0;
  width:min(30vw,340px);
  height:75vh;
  background:url("assets/images/flower-alpha.png") top right/contain no-repeat;
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
@media(max-width:767px){
  body::after{
    top:18vh;
    width:55vw;
    height:55vh;
    opacity:.6;
  }
}

/* Conteúdo acima da flor */
.hero,.section,footer{
  position:relative;
  z-index:1;
}

/* Estruturas */
.container{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:0 1rem;
}
h1,h2,h3{
  font-weight:700;
  line-height:1.3;
  color:var(--teal-dark);
  margin-bottom:.5em;
}
h1{font-size:2.75rem}
h2{font-size:2rem}
h3{font-size:1.35rem}
p,li{
  font-size:1rem;
  margin-bottom:.75rem;
}
ul{
  padding-left:1.2rem;
  margin-bottom:1.2rem;
}
a{
  color:var(--teal-dark);
  text-decoration:none;
  transition:opacity .2s;
}
a:hover,a:focus{
  opacity:.8;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.65rem 1.5rem;
  border-radius:9999px;
  font-size:1rem;
  font-weight:600;
  color:#fff;
  background:var(--btn-bg);
  border:0;
  cursor:pointer;
  transition:background .2s;
}
.btn:hover,.btn:focus{
  background:var(--btn-bg-hover);
}
.btn i{
  font-size:1rem;
}

/* Hero */
.hero{
  padding:2.5rem 1rem 1.5rem;
  text-align:center;
}
.hero img{
  width:85%;
  max-width:420px;
  height:auto;
  margin:0 auto;
}

/* Seções */
.section{
  padding:3.5rem 0;
}

/* ---------------- Carrossel facilitadoras ---------------- */
/* Usando Swiper.js para um slider mais estável */
.swiper-container{
  max-width:900px;
  margin:0 auto;
  overflow:hidden; /* esconde slides adjacentes */
  position:relative;
}
.swiper-wrapper{
  display:flex;
}
.swiper-slide{
  flex-shrink:0;
  width:100%;
  padding:0 1rem;
}
.fac-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.fac-img{
  width:170px;
  height:170px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:1rem;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.fac-info h3{
  margin-bottom:.25rem;
}
.fac-info p{
  margin-bottom:.5rem;
}
@media(min-width:600px){
  .fac-card{
    flex-direction:row;
    text-align:left;
  }
  .fac-img{
    margin:0 1.5rem 0 0;
  }
}
/* Pagination bullets sempre abaixo e sem sobreposição */
.swiper-pagination{
  position:static !important;
  margin-top:1rem;
  text-align:center;
}
.swiper-pagination-bullet{
  width:12px;
  height:12px;
  margin:0 4px;
  border-radius:50%;
  background:var(--teal-light);
  opacity:1;
  cursor:pointer;
  transition:background .3s;
}
.swiper-pagination-bullet-active{
  background:var(--teal-dark);
}

/* ---------------- Tabela, CTA, Rodapé ---------------- */
.schedule-table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}
.schedule-table th,.schedule-table td{
  border:1px solid var(--teal-light);
  padding:.75rem .6rem;
  text-align:left;
}
.schedule-table th{
  background:var(--teal-dark);
  color:#fff;
  font-weight:600;
}
.schedule-table tr:nth-child(even) td{
  background:rgba(185,209,209,.2);
}
.cta-block{
  text-align:center;
  margin-top:2rem;
}
.cta-block .btn{
  margin:.4rem;
}
footer{
  padding:2rem 0;
  text-align:center;
  font-size:.9rem;
  color:var(--teal-medium);
  background-image:linear-gradient(to bottom,transparent 0%,rgba(185,209,209,.2) 100%);
}