/* =========================================================
   FLOWY PISCINAS — SITE PRINCIPAL V1.1
   Ajustes focados em HERO + carrossel de Recursos
   Carregado DEPOIS do styles.css original.
   ========================================================= */

/* ---------- HERO: piscineiro livre em PNG ---------- */
.hero{
  overflow:hidden;
}

.hero-grid{
  align-items:center;
}

.hero-visual{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
}

.phone-stage.hero-free-stage{
  position:relative;
  width:min(560px,100%);
  height:560px;
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  margin:0;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.phone-stage.hero-free-stage::before,
.phone-stage.hero-free-stage::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  z-index:0;
}

.phone-stage.hero-free-stage::before{
  width:500px;
  height:500px;
  border:1px solid rgba(84,197,209,.22);
  right:-35px;
  bottom:18px;
}

.phone-stage.hero-free-stage::after{
  width:620px;
  height:620px;
  border:1px solid rgba(84,197,209,.14);
  right:-95px;
  bottom:-42px;
}

.hero-piscineiro-free{
  position:relative;
  z-index:1;
  display:block;
  width:auto !important;
  max-width:none !important;
  height:545px !important;
  object-fit:contain !important;
  object-position:center bottom;
  filter:drop-shadow(0 26px 48px rgba(19,84,127,.14));
  transform:translateX(10px);
}

.hero-free-stage .floating{
  z-index:3;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 42px rgba(19,84,127,.14);
}

.hero-free-stage .floating-one{left:-10px;top:110px}
.hero-free-stage .floating-two{right:-18px;top:300px}
.hero-free-stage .floating-three{left:18px;bottom:38px}

/* ---------- RECURSOS: carrossel 4 por vez ---------- */
.features{
  overflow:hidden;
}

.feature-carousel{
  position:relative;
  width:100%;
}

.feature-carousel-viewport{
  width:100%;
  overflow:hidden;
  padding:8px 2px 26px;
}

.feature-grid.feature-carousel-track{
  --carousel-gap:18px;
  display:flex !important;
  grid-template-columns:none !important;
  gap:var(--carousel-gap) !important;
  align-items:stretch;
  width:max-content;
  transform:translate3d(0,0,0);
  transition:transform .68s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.feature-carousel-track .feature-card,
.feature-carousel-track .feature-card.feature-large,
.feature-carousel-track .feature-card.feature-accent{
  flex:0 0 calc((min(1180px, calc(100vw - 40px)) - (3 * var(--carousel-gap))) / 4) !important;
  width:calc((min(1180px, calc(100vw - 40px)) - (3 * var(--carousel-gap))) / 4) !important;
  min-height:300px;
  height:auto !important;
  grid-column:auto !important;
  grid-row:auto !important;
  padding:28px !important;
  display:flex;
  flex-direction:column;
  border-radius:24px;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.feature-carousel-track .feature-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(19,84,127,.11);
}

.feature-carousel-track .mini-dashboard{
  margin-top:auto;
  transform:scale(.9);
  transform-origin:left bottom;
}

.feature-carousel-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:2px;
}

.feature-carousel-arrow{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(19,84,127,.14);
  background:#fff;
  color:#13547F;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(19,84,127,.08);
  transition:transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.feature-carousel-arrow:hover{
  transform:translateY(-2px);
  color:#2F92A7;
  border-color:rgba(47,146,167,.45);
  box-shadow:0 14px 30px rgba(19,84,127,.12);
}

.feature-carousel-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.feature-carousel-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:99px;
  background:rgba(19,84,127,.18);
  cursor:pointer;
  transition:width .25s ease, background-color .25s ease;
}

.feature-carousel-dot.is-active{
  width:28px;
  background:#2F92A7;
}

@media (max-width:1100px){
  .feature-carousel-track .feature-card,
  .feature-carousel-track .feature-card.feature-large,
  .feature-carousel-track .feature-card.feature-accent{
    flex-basis:calc((100vw - 58px) / 2) !important;
    width:calc((100vw - 58px) / 2) !important;
  }

  .hero-piscineiro-free{height:500px !important}
}

@media (max-width:820px){
  .hero-visual{min-height:470px}
  .phone-stage.hero-free-stage{height:470px;width:100%}
  .hero-piscineiro-free{height:455px !important;transform:none}
  .hero-free-stage .floating-one{left:2%;top:70px}
  .hero-free-stage .floating-two{right:1%;top:235px}
  .hero-free-stage .floating-three{left:7%;bottom:28px}
}

@media (max-width:640px){
  .hero-visual{min-height:390px}
  .phone-stage.hero-free-stage{height:390px}
  .hero-piscineiro-free{height:385px !important}
  .phone-stage.hero-free-stage::before{width:350px;height:350px;right:0}
  .phone-stage.hero-free-stage::after{display:none}

  .feature-carousel-viewport{overflow:visible}
  .feature-grid.feature-carousel-track{--carousel-gap:14px}
  .feature-carousel-track .feature-card,
  .feature-carousel-track .feature-card.feature-large,
  .feature-carousel-track .feature-card.feature-accent{
    flex-basis:calc(100vw - 54px) !important;
    width:calc(100vw - 54px) !important;
    min-height:280px;
  }
}

@media (prefers-reduced-motion:reduce){
  .feature-grid.feature-carousel-track{transition:none}
  .feature-carousel-track .feature-card,
  .feature-carousel-arrow{transition:none}
}

/* ---------- V2.0: preços e rodapé ---------- */
.pricing-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:980px;
  margin:0 auto;
}

.price-card{
  display:flex;
  flex-direction:column;
}

.price-card .btn{
  margin-top:auto;
}

.price-annual strong{
  font-size:31px;
}

.pricing-note{
  max-width:720px;
  margin:24px auto 0;
  font-size:12px;
  line-height:1.55;
}

.footer-links{
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width:1000px){
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-grid .price-card:last-child{grid-column:1 / -1;max-width:480px;width:100%;justify-self:center}
}

@media (max-width:680px){
  .pricing-grid{grid-template-columns:1fr}
  .pricing-grid .price-card:last-child{grid-column:auto;max-width:none}
  .footer-links{justify-content:center}
}