/* ===================================================================
   RESERVA CAMUÁ — Landing Page
   =================================================================== */

:root{
  --navy:         #0b1a23;
  --navy-card:    #0c1e29;
  --teal-deep:    #0e3640;
  --teal-mid:     #155563;
  --teal:         #1c6c79;
  --teal-light:   #1f7d8c;
  --blue-bright:  #2f7fc0;
  --blue-light:   #3f9fd6;
  --green:        #6f8f44;
  --green-dark:   #5d7a39;
  --green-accent: #93c054;
  --cream:        #f7f6f2;
  --white:        #ffffff;
  --ink:          #1c5866;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Poppins', sans-serif;
}

*{ box-sizing:border-box; }

body{
  font-family: var(--font-body);
  color:#384a4f;
  background:var(--white);
  overflow-x:hidden;
}

h1,h2,h3,h4, .font-display{
  font-family: var(--font-display);
}

a{ text-decoration:none; }

b, strong {
    font-weight: 600;
}

img{ max-width:100%; display:block; }

.container-wide{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Eyebrow / serif headings ---------- */
.eyebrow{
  font-family: var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
}
.eyebrow.light{ color:#eaf3f4; }

.display-headline{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.15;
}

/* ---------- Buttons ---------- */
.btn-cta{
  display:inline-block;
  background: linear-gradient(180deg, #7a9c4d, var(--green));
  color:#fff;
  font-family: var(--font-body);
  font-weight:600;
  font-size:1.02rem;
  border:none;
  border-radius:4px;
  padding:.95rem 1.5rem;
  width:100%;
  text-align:center;
  letter-spacing:.01em;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.btn-cta:hover{
  background: linear-gradient(180deg, #87aa57, #647f3d);
  transform: translateY(-1px);
  color:#fff;
}

.btn-outline-light-pill{
  display:inline-block;
  background:#fff;
  color: var(--teal-deep);
  font-weight:700;
  font-family: var(--font-body);
  padding:.7rem 2rem;
  border-radius:3px;
  letter-spacing:.02em;
  font-size:.92rem;
  transition: all .2s ease;
}
.btn-outline-light-pill:hover{
  background: var(--teal-deep);
  color:#fff;
}

.btn-maps{
  display:inline-block;
  background: var(--green);
  color:#fff;
  font-weight:600;
  padding:.5rem 1.1rem;
  border-radius:3px;
  font-size:.82rem;
}
.btn-maps:hover{ background: var(--green-dark); color:#fff; }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed;
  z-index:1200;
  right:22px;
  bottom:22px;
  width:58px; height:58px;
  background:#25d366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  animation: wa-pulse 2.4s infinite;
}
.wa-float svg{ width:30px; height:30px; color:#fff; }
@keyframes wa-pulse{
  0%{ box-shadow:0 6px 20px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 6px 20px rgba(0,0,0,.3), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 6px 20px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- Logo ---------- */
.logo{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
}
.logo .logo-icon{ width:46px; flex:0 0 auto; }
.logo .logo-icon svg{ width:100%; display:block; fill:#fff; }
.logo .word small{
  display:block;
  font-family: var(--font-body);
  font-size:.6rem;
  letter-spacing:.32em;
  font-weight:500;
  opacity:.85;
}
.logo .word strong{
  display:block;
  font-family: var(--font-display);
  font-size:1.55rem;
  line-height:1.05;
  letter-spacing:.06em;
  font-weight:600;
}
.logo .word .lavras{
  display:block;
  font-size:.55rem;
  letter-spacing:.34em;
  font-weight:500;
  opacity:.85;
  margin-top:2px;
}

/* ---------- Diagonal stripes decoration ---------- */
.stripes{
  position:absolute;
  width:170px;
  height:170px;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
  opacity:.9;
}
.stripes::before{
  content:"";
  position:absolute;
  inset:-50%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.9) 0 14px,
    transparent 14px 34px
  );
}
.stripes.bl{ bottom:-230px; left:0; z-index:5; width:150px; height:auto; overflow:visible; }
.stripes.bl::before{ display:none; }
.stripes.bl img{ display:block; width:100%; height:auto; }
.stripes.tr{ top:-160px; bottom:auto; right:0; left:auto; z-index:5; width:150px; height:auto; overflow:visible; }
.stripes.tr::before{ display:none; }
.stripes.tr img{ display:block; width:100%; height:auto; transform:scaleX(-1); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;
  min-height:72vh;
  display:flex;
  align-items:center;
  background: url('../img/banner-site-reserva-camua.jpg');
  background-size: cover;
  background-position: center;
  overflow:hidden;
}
.hero .hero-photo-strip{
  display:none;
}
.hero .hero-overlay{
  display:none;
}
.hero-content{
  position:relative;
  z-index:3;
  width:100%;
  padding: 1rem 0 4rem;
}
.hero .logo{ margin-bottom: 3.2rem; }
.hero-headline{
  color:#fff;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  margin-bottom:1.1rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-sub{
  color:#e7eef0;
  font-size:1.12rem;
  max-width:480px;
  line-height:1.55;
  font-weight:300;
}
.hero-sub strong{ font-weight:600; }

.hero-block-img{
  display:block;
  width:100%;
  max-width:400px;
  height:auto;
  margin:0 auto;
}

.lead-card{
  background: rgba(9,22,30,.88);
  border: 1px solid rgba(255,255,255,.07);
  border-radius:6px;
  padding:2rem 2.1rem 2.2rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
}
.lead-card h3{
  color:#fff;
  font-family: var(--font-body);
  font-weight:400;
  font-size:1.05rem;
  line-height:1.5;
  margin-bottom:1.4rem;
}
.lead-card h3 b{ font-weight:700; }
.form-field{ margin-bottom:1.3rem; }
.form-field label{
  display:block;
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  margin-bottom:.45rem;
}
.form-field input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.35rem 0 .55rem;
}
.form-field input::placeholder{ color:rgba(255,255,255,.45); }
.form-field input:focus{
  outline:none;
  border-bottom-color: var(--green-accent);
}
.form-field.has-error input{ border-bottom-color:#ff6b6b; }
.form-field .field-error{
  display:none;
  color:#ff6b6b;
  font-size:.8rem;
  margin-top:.35rem;
}
.form-field.has-error .field-error{ display:block; }
.lgpd{
  display:flex;
  gap:.6rem;
  margin-top:1.1rem;
  font-size:.72rem;
  color:rgba(255,255,255,.65);
  line-height:1.5;
}
.lgpd input{ margin-top:.2rem; flex:0 0 auto; }
.lgpd a{ color:#cfe6ea; text-decoration:underline; }

/* =====================================================================
   GENERIC SECTIONS
   ===================================================================== */
.section{ padding: 5.5rem 0; }
.section-sm{ padding: 3.5rem 0; }

.text-block{
  max-width: 560px;
  margin: 0 auto;
  text-align:center;
}
.text-block.text-block-wide{
  max-width: 760px;
}
.text-block p{
  color: var(--ink);
  font-size:.90rem;
  line-height:1.35;
  font-weight:300;
}
.text-block .eyebrow{ letter-spacing:.00em; margin-bottom:.6rem; font-size:1.10rem; }
.text-block .eyebrow + p{ margin-top:1.1rem; }

.full-photo{
  width:100%;
  height: clamp(220px, 48vw, 560px);
  object-fit:cover;
  display:block;
}
@media (min-width:992px){
  .full-photo{
    height:auto;
    object-fit:contain;
    background:#000;
  }
}

/* ---------- Gallery / carousel (Swiper, centeredSlides) ---------- */
.gallery-carousel-wrap{
  position:relative;
  z-index:10;
  max-width:100%;
  margin:0 auto;
}
@media (min-width:992px){
  .gallery-carousel-wrap{
    width:150vw;
    max-width:150vw;
    margin-left:-25vw;
  }
}
.gallery-swiper{ position:relative; }
.gallery-swiper .swiper-wrapper{ align-items:center; }

.gallery-slide{
  position:relative;
  cursor:pointer;
}
.gallery-slide-inner{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  transform: scale(.82);
  filter: brightness(.55);
  transition: transform .45s ease, filter .45s ease, box-shadow .45s ease;
}
.gallery-slide-inner img{
  width:100%;
  height:auto;
  display:block;
}
.gallery-slide-inner .tag{
  position:absolute;
  left:1.2rem; bottom:30px;
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#fff;
  font-family:var(--font-display);
  letter-spacing:.16em;
  font-size:.85rem;
}
.gallery-slide-inner .tag-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  object-fit:contain;
}
.gallery-slide.swiper-slide-active .gallery-slide-inner{
  transform: scale(1);
  filter: brightness(1);
  z-index:3;
  box-shadow: 0 25px 55px rgba(5,15,20,.4);
}

.gallery-arrow{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:46px; height:46px;
  background: var(--green);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:5;
  transition: background .2s;
  border:none;
}
.gallery-arrow:hover{ background:var(--green-dark); }
.gallery-arrow svg{ width:18px; height:18px; fill:#fff; }
.gallery-arrow.prev{ left: calc(33.5% - 23px); }
.gallery-arrow.next{ right: calc(33.5% - 23px); }
@media (max-width: 991.98px){
  .gallery-arrow.prev{ left:8px; }
  .gallery-arrow.next{ right:8px; }
}

/* ---------- Lightbox (galeria) ---------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(5,15,20,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.active{ opacity:1; visibility:visible; }
.lightbox-img{
  max-width:88vw;
  max-height:82vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 25px 60px rgba(0,0,0,.5);
}
.lightbox-caption{
  position:absolute;
  bottom:2.4rem;
  left:0; right:0;
  text-align:center;
  color:#fff;
  font-family:var(--font-display);
  letter-spacing:.16em;
  font-size:.95rem;
}
.lightbox-close{
  position:absolute;
  top:22px; right:22px;
  width:44px; height:44px;
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s;
}
.lightbox-close:hover{ background:rgba(255,255,255,.12); }
.lightbox-close svg{ width:18px; height:18px; fill:#fff; }
.lightbox-nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:46px; height:46px;
  background: var(--green);
  border-radius:3px;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:5;
  transition: background .2s;
}
.lightbox-nav:hover{ background:var(--green-dark); }
.lightbox-nav svg{ width:18px; height:18px; fill:#fff; }
.lightbox-nav.prev{ left:22px; }
.lightbox-nav.next{ right:22px; }
@media (max-width: 575.98px){
  .lightbox-nav.prev{ left:10px; }
  .lightbox-nav.next{ right:10px; }
  .lightbox-close{ top:12px; right:12px; }
}

/* ---------- Ficha Técnica ---------- */
.ficha-tecnica{
  position:relative;
  z-index:1;
  background: url('../img/ficha-tecnica-fundo.jpg') center/cover no-repeat;
  color:#dfe9ea;
  overflow:visible;
  margin-top: -200px;
  padding-top: 12.5rem;
  padding-bottom: 5.5rem;
}
.ficha-tecnica .eyebrow{ color:#fff; text-align:center; display:block; margin-bottom:3rem; }
.ficha-col .ficha-title-img{
  display:block;
  height:54px;
  margin-bottom:1.1rem;
}
.ficha-col ul{
  list-style:none;
  padding:0; margin:0;
  font-size:.78rem;
  font-weight:300;
  line-height:1.3;
  color:#cfe2e2;
}
.ficha-col ul li{
  position:relative;
  padding-left:1em;
  margin-bottom:.6em;
}
.ficha-col ul li:last-child{ margin-bottom:0; }
.ficha-col ul li::before{
  content:"•";
  color: var(--green-accent);
  position:absolute;
  left:0;
}

/* ---------- Video section ---------- */
.video-section{
  position:relative;
  z-index:0;
  background: var(--blue-bright);
  color:#fff;
  overflow:hidden;
  padding-bottom: 58vw;
  padding-top: 6rem;
}
.video-section-bg{
  position:absolute;
  left:0; right:0; bottom:0;
  min-height:100%;
  aspect-ratio: 1920 / 1966;
  background-size:cover;
  background-position:center;
  z-index:-1;
}
.video-section .text-block{ max-width:700px; }
.video-section .text-block p{ color:#eaf6fb; }
.video-section .eyebrow{ color:#fff; }
.video-frame{
  position:relative;
  max-width:800px;
  margin:2.5rem auto 0;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,15,25,.35);
  cursor:pointer;
  background:#06222f;
}
.video-frame img{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit:cover;
  display:block;
}
.video-frame .play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.video-frame .play span{
  width:84px; height:84px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(2px);
  transition: transform .2s;
}
.video-frame:hover .play span{ transform:scale(1.08); }
.video-frame .play svg{ width:26px; height:26px; fill:#fff; margin-left:4px; }
.video-frame .yt-badge{
  position:absolute; left:1rem; bottom:1rem;
  background:#fff; color:#222; font-size:.72rem; font-weight:700;
  padding:.2rem .5rem; border-radius:3px;
  display:flex; align-items:center; gap:.3rem;
}

/* ---------- Unidade / map ---------- */
.unidade-section{
  background: linear-gradient(160deg, var(--teal-mid), var(--teal-deep));
  color:#fff;
  position:relative;
  overflow:hidden;
  padding: 4.5rem 0 0;
}
.unidade-section .eyebrow{ color:#fff; }
.unidade-section p{ color:#dcecee; font-weight:300; }
.mapa-wrap{
  position:relative;
  margin-top:4.5rem;
}
.mapa-wrap img{ width:100%; }
.mapa-wrap .ampliar{
  position:absolute; top:1rem; right:1.2rem;
  background:transparent;
}

/* ---------- Imagens com zoom (clique para ampliar + pinch-zoom) ---------- */
.zoomable{ cursor:pointer; }
.lightbox-zoom{ overflow:auto; }
.lightbox-zoom .lightbox-img{
  max-width:none;
  max-height:none;
  width:100%;
  height:auto;
  margin:auto;
}
@media (min-width:600px){
  .lightbox-zoom .lightbox-img{ width:88vw; }
}

/* ---------- Localização ---------- */
.local-photo-section{ padding-bottom:0.1rem; }
.local-img-wrap{
  position:relative;
  max-width:800px;
  margin:2.2rem auto 0;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.18);
}
.local-img-wrap img{ width:100%; height:auto; display:block; }
.local-img-wrap .ampliar{
  position:absolute; top:.9rem; right:1rem;
  color:#fff; font-size:.82rem;
}
.local-img-wrap .credito{
  position:absolute; bottom:.6rem; left:.9rem;
  color:rgba(255,255,255,.75); font-size:.68rem;
}
.local-img-wrap .maps-btn{
  position:absolute; bottom:1rem; right:1rem;
}

.localizacao-teal{
  background: #1c6a7a;
  color:#fff;
  padding: 16rem 0 16rem;
  margin-top: -180px;
}
.localizacao-teal p{ color:#eaf6f7; }
.endereco{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem;
  margin: 1.6rem 0 1.8rem;
  font-size:.98rem;
}
.endereco svg{ width:18px; height:18px; fill: var(--green-accent); flex:0 0 auto; }

/* ---------- Footer / contact ---------- */
.footer-cta{
  background: linear-gradient(180deg, #0e2a38, #1c6a7a);
  position:relative;
  padding: 5rem 0 3rem;
  overflow:visible;
}
.contact-card{
  background: var(--navy-card);
  border-radius:6px;
  max-width:760px;
  margin:-260px auto 0;
  padding: 2.6rem 3rem 3rem;
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  position:relative;
  z-index:2;
}
.contact-card .eyebrow{ color:#fff; }
.contact-card h3{
  color:#fff;
  font-family:var(--font-body);
  font-weight:400;
  font-size:.9rem;
  margin: 1rem 0 2rem;
  line-height:1.55;
}
.contact-card h3 b{ font-weight:700; }
.contact-card .form-field{ text-align:left; max-width:480px; margin:0 auto 1.3rem; }
.contact-card .form-field label{ font-size:.9rem; }
.contact-card .form-field input{ font-size:.9rem; }
.contact-card .btn-cta{ max-width:480px; margin:1.4rem auto 0; font-size:.92rem; }

.info-vendas{
  text-align:center;
  margin-top: 3.5rem;
  color:#fff;
}
.info-vendas .eyebrow{ color:#cfe6e8; font-size:.85rem; }
.phone-number{
  font-family:var(--font-body);
  font-weight:700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  gap:.5rem;
  margin-top:.3rem;
}
.phone-number .ddd{ font-family:var(--font-body); font-weight:400; font-size:1.2rem; opacity:.8; }
.phone-number svg{ width:30px; height:30px; color:#fff; margin-left:.3rem; }

.logos-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:2.6rem 3.2rem;
  margin: 3.2rem 0 2.6rem;
}
.logo-rodape{
  height:38px;
  width:auto;
}

.legal{
  max-width:1100px;
  margin:0 auto;
  font-size:.68rem;
  line-height:1.7;
  color:#90b0b3;
  text-align:center;
  padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.copyright{
  text-align:center;
  font-size:.75rem;
  color:#f1f1f1;
  margin-top:1.2rem;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991.98px){
  .hero{ min-height:auto; }
  .hero-content{ padding: 5rem 0 3rem; }
  .lead-card{ margin-top:2.5rem; }
  .ficha-tecnica{ margin-top:-70px; }
  .ficha-tecnica .container-wide{ padding-left:60px; }
  .ficha-col{ margin-bottom:2.4rem; }
  .contact-card{ margin: -260px auto 0; padding: 2.6rem 3rem 3rem; }
  .stripes{ width:140px; height:140px; }
  .stripes.bl{ width:110px; height:auto; }
  .stripes.tr{ width:110px; height:auto; }
  .localizacao-teal{ padding: 12rem 0 12rem; margin-top: -180px; }
}

@media (max-width: 575.98px){
  .hero{ min-height:72vh; }
  .hero .container-wide{ padding-left:40px; padding-right:40px; }
  .hero-content{ padding-top:1rem; }
  .section{ padding:3.6rem 0; }
  .ficha-tecnica{ padding-bottom: 9rem; }
  .video-section{ padding-top: 5rem; padding-bottom: 8rem; }
  .video-frame{ margin-left:60px; margin-right:60px; }
  .footer-cta{ padding-top: 7rem; }
  .stripes{ width:100px; height:100px; }
  .stripes.bl{ width:80px; height:auto; bottom:-90px; }
  .stripes.tr{ width:80px; height:auto; top:-90px; }
  .hero-headline{ font-size:2rem; }
  .lead-card{ padding:1.6rem 1.4rem 1.8rem; }
  .gallery-side{ display:none; }
  .phone-number{ flex-wrap:wrap; }
  .logos-row{ flex-direction:column; gap:1.6rem; }
}