/* =========================================================
   PETOM TUR — Turismo em Tutóia • Paulino Neves • Barreirinhas
   Paleta: areia (branco quente) · sol (laranja) · lagoa (verde)
   Mobile-first · sem JavaScript · acessível
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* areia / branco */
  --sand:        #FFF8EE;
  --sand-2:      #FBEEDA;
  --card:        #FFFFFF;

  /* sol / pôr do sol */
  --sun:         #FF8A1E;
  --sun-soft:    #FFB24C;
  --gold:        #FFC740;
  --coral:       #FF5C39;

  /* lagoa / mata */
  --green:       #1E8A5C;
  --green-deep:  #14543B;
  --green-night: #0E3B2A;

  /* whatsapp */
  --wa:          #22C35E;
  --wa-deep:     #16A34A;

  /* tinta / texto */
  --ink:         #15352A;
  --ink-soft:    #4A6157;
  --line:        #EFDFC6;

  --radius:      22px;
  --radius-sm:   14px;
  --shadow-sm:   0 2px 10px rgba(20,60,45,.07);
  --shadow:      0 14px 34px -14px rgba(20,60,45,.30);
  --shadow-lg:   0 26px 60px -20px rgba(20,60,45,.40);

  --font-display: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--sand);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* coluna central — “telefone” no desktop, full no celular */
.wrap{
  width:100%;
  max-width:540px;
  margin:0 auto;
  background:var(--sand);
  position:relative;
  overflow:hidden;
}
@media (min-width:560px){
  body{ background:
      radial-gradient(120% 90% at 50% -10%, #FFE7C2 0%, #F7E0C4 35%, #EFE3CE 100%);
      padding:24px 0; }
  .wrap{ border-radius:34px; box-shadow:var(--shadow-lg); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:34px 22px 0;
  text-align:center;
  color:#fff;
  overflow:hidden;
  background:
    linear-gradient(180deg,
      #2C8FB8 0%,        /* céu alto */
      #58B0CF 14%,
      #FFC766 46%,       /* horizonte dourado */
      #FF8A1E 70%,       /* sol */
      #FF6A33 100%);     /* pôr do sol */
}

/* sol radiante */
.hero__sun{
  position:absolute;
  top:96px; left:50%;
  width:230px; height:230px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
      #FFF6D8 0%, #FFE07A 32%, #FFC740 55%, rgba(255,199,64,0) 72%);
  filter:blur(2px);
  animation:sunPulse 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sunPulse{
  0%,100%{ transform:translateX(-50%) scale(1);   opacity:.95; }
  50%    { transform:translateX(-50%) scale(1.07); opacity:1; }
}

/* guarás (íbis vermelho) sobrevoando */
.hero__birds{
  position:absolute;
  top:64px; right:18px;
  width:120px; height:auto;
  opacity:.92;
  animation:flyFloat 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flyFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}

.hero__inner{ position:relative; z-index:2; padding-bottom:8px; }

.logo{
  width:148px; height:148px;
  margin:6px auto 16px;
  border-radius:30px;
  box-shadow:0 16px 30px -10px rgba(0,0,0,.45);
}

.hero__brand{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#FFF3DC;
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}

.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:2.05rem;
  line-height:1.1;
  margin:6px 0 10px;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.hero h1 .accent{ color:#FFEFC2; }

.hero__lead{
  font-size:1.02rem;
  max-width:30ch;
  margin:0 auto 16px;
  color:#FFF6E8;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}

.regions{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 8px;
  margin-bottom:20px;
  font-weight:700;
  font-size:.86rem;
}
.regions span{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.38);
  padding:6px 12px;
  border-radius:999px;
  backdrop-filter:blur(3px);
}
.regions span::before{ content:"📍"; font-size:.78em; filter:grayscale(.1); }

.hero__cta{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:var(--coral);
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem;
  padding:14px 26px;
  border-radius:999px;
  box-shadow:0 12px 24px -8px rgba(0,0,0,.4);
  min-height:52px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hero__cta:active{ transform:translateY(2px) scale(.99); box-shadow:0 6px 14px -8px rgba(0,0,0,.4); }
.hero__cta svg{ width:18px; height:18px; }

/* duna / horizonte */
.hero__dune{ position:relative; z-index:2; display:block; width:100%; margin-top:14px; }

/* =========================================================
   FAIXA DE CONFIANÇA
   ========================================================= */
.trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:18px 16px 4px;
  background:var(--sand);
}
.trust__item{
  text-align:center;
  font-weight:700;
  font-size:.74rem;
  line-height:1.25;
  color:var(--green-deep);
}
.trust__item svg{
  width:26px; height:26px;
  margin:0 auto 6px;
  display:block;
  color:var(--sun);
}

/* =========================================================
   GALERIA / CARROSSEL (rolagem automática fluida — CSS puro)
   ========================================================= */
.gallery{
  padding:24px 0 6px;
  background:var(--sand);
  overflow:hidden;
}
.gallery__head{
  text-align:center;
  padding:0 18px 14px;
}
.gallery__head h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.6rem;
  line-height:1.1;
  color:var(--ink);
  margin-top:4px;
}
.gallery__head h2 .u{
  background:linear-gradient(180deg,transparent 62%, #FFD98A 62%);
}

/* trilho com máscara nas bordas p/ efeito “fade” */
.carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.carousel__track{
  display:flex;
  gap:14px;
  width:max-content;
  padding:6px 14px;
  list-style:none;
  /* rolagem contínua, linear e suave (acelerada por GPU) */
  animation:carouselScroll 56s linear infinite;
  will-change:transform;
}
/* pausa ao tocar / passar o mouse */
.carousel:hover .carousel__track,
.carousel:active .carousel__track,
.carousel:focus-within .carousel__track{ animation-play-state:paused; }

.carousel__item{
  flex:0 0 auto;
  width:208px;            /* modo retrato */
  aspect-ratio:3 / 4;
  border-radius:18px;
  overflow:hidden;
  background:var(--sand-2);
  border:3px solid #fff;
  box-shadow:var(--shadow);
}
.carousel__item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* desloca exatamente metade do trilho (1 conjunto) = loop perfeito */
@keyframes carouselScroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}

@media (min-width:560px){
  .carousel__item{ width:230px; }
}

/* =========================================================
   SEÇÃO DE PASSEIOS
   ========================================================= */
.section{ padding:26px 18px 8px; }

.eyebrow{
  display:inline-block;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--sun);
  background:#FFEFD7;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:10px;
}
.section h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.7rem;
  line-height:1.1;
  color:var(--ink);
}
.section h2 .u{
  background:linear-gradient(180deg,transparent 62%, #FFD98A 62%);
}
.section__sub{
  color:var(--ink-soft);
  margin-top:6px;
  font-size:.96rem;
  max-width:38ch;
}

.tours{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:20px;
}

/* ---------- Card de passeio (estilo bilhete) ---------- */
.tour{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  overflow:hidden;
}
.tour__stripe{ height:6px; width:100%; }

.tour__top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 18px 6px;
}
.tour__icon{
  flex:0 0 auto;
  width:54px; height:54px;
  border-radius:16px;
  display:grid; place-items:center;
  color:#fff;
  font-size:30px;          /* tamanho do emoji */
  line-height:1;
  box-shadow:var(--shadow-sm);
}
.tour__icon svg{ width:30px; height:30px; }

/* miniatura de foto no lugar do emoji — o gradiente vira um anel colorido */
.tour__icon--photo{
  padding:3px;
  overflow:hidden;
}
.tour__icon--photo img{
  width:100%; height:100%;
  border-radius:13px;
  object-fit:cover;
  display:block;
}

/* variante sem moldura/anel colorido — usada nos cards de hospedagem */
.tour__icon--plain{
  padding:0;
  background:none;
  box-shadow:none;
}
.tour__icon--plain img{ border-radius:16px; }

/* ---------- Galeria de fotos do passeio ---------- */
.tour__gal{
  display:flex;
  gap:10px;
  margin:16px 0 0;
  padding:2px 18px 12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:18px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.tour__gal::-webkit-scrollbar{ display:none; }

.shot{
  flex:0 0 auto;
  width:min(56%, 178px);
  aspect-ratio:3 / 4;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:var(--sand-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  scroll-snap-align:start;
}
.shot img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 45%;
}

/* passeio com uma única foto: banner que ocupa o card inteiro */
.tour__gal--uma{ scroll-snap-type:none; }
.tour__gal--uma .shot{
  width:100%;
  aspect-ratio:4 / 3;
}

.gal-hint{
  margin:-4px 18px 10px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.65;
}

@media (min-width:640px){
  .shot{ width:min(40%, 200px); }
  .tour__gal--uma .shot{ aspect-ratio:3 / 2; }
}

.tour__tag{
  display:inline-block;
  font-weight:800; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-deep);
  background:#E7F4EC;
  padding:3px 9px; border-radius:999px;
  margin-bottom:4px;
}
.tour__head h3{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.35rem;
  line-height:1.12;
  color:var(--ink);
}
.tour__sub{
  color:var(--ink-soft);
  font-size:.9rem;
  margin-top:2px;
}

/* faixa de preço — “canhoto” do bilhete */
.tour__price{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 18px 4px;
  padding:12px 16px;
  background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  border-radius:16px;
  color:#fff;
}
.tour__price .price{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.5rem;
  line-height:1;
}
.tour__price .unit{
  display:block;
  font-size:.74rem;
  opacity:.92;
  font-weight:700;
  margin-top:3px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tour__price .stamp{
  flex:0 0 auto;
  font-size:.66rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  background:rgba(255,255,255,.2);
  border:1px dashed rgba(255,255,255,.6);
  padding:6px 8px; border-radius:10px;
  text-align:center; line-height:1.2;
}

/* perfuração do bilhete */
.perf{
  position:relative;
  height:0;
  margin:14px 0 4px;
  border-top:2px dashed var(--line);
}
.perf::before,.perf::after{
  content:"";
  position:absolute; top:50%;
  width:20px; height:20px;
  background:var(--sand);
  border-radius:50%;
  transform:translateY(-50%);
}
.perf::before{ left:-11px; }
.perf::after{ right:-11px; }

/* detalhes (acordeão nativo) */
.tour__details{ margin:0 18px; }
.tour__details summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.96rem;
  color:var(--sun);
  background:#FFF4E4;
  border:1.5px solid #FFD9A8;
  border-radius:12px;
  padding:11px 14px;
  min-height:46px;
  user-select:none;
  transition:background .15s ease;
}
.tour__details summary::-webkit-details-marker{ display:none; }
.tour__details summary .chev{
  width:16px; height:16px;
  transition:transform .25s ease;
}
.tour__details[open] summary{ background:#FFEAD0; }
.tour__details[open] summary .chev{ transform:rotate(180deg); }
.tour__details summary .lbl-open{ display:none; }
.tour__details[open] summary .lbl-closed{ display:none; }
.tour__details[open] summary .lbl-open{ display:inline; }

.specs{
  margin:14px 2px 4px;
  display:flex;
  flex-direction:column;
  gap:13px;
  animation:revealUp .3s ease;
}
@keyframes revealUp{ from{ opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

.spec{ display:flex; gap:12px; }
.spec__ico{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:10px;
  background:#FFF1DF;
  color:var(--sun);
  display:grid; place-items:center;
}
.spec__ico svg{ width:18px; height:18px; }
.spec dt{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--green-deep);
  margin-bottom:1px;
}
.spec dd{ color:var(--ink-soft); font-size:.95rem; }

/* botão whatsapp */
.btn-wa{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:16px 18px 18px;
  min-height:54px;
  background:linear-gradient(135deg, var(--wa) 0%, var(--wa-deep) 100%);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  border-radius:14px;
  box-shadow:0 12px 22px -10px rgba(22,163,74,.7);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-wa:active{ transform:translateY(2px); box-shadow:0 5px 12px -8px rgba(22,163,74,.7); }
.btn-wa svg{ width:23px; height:23px; flex:0 0 auto; }

/* ---------- Lista de quartos (hospedagem parceira) ---------- */
.rooms{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:16px 2px 4px;
}
.room{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:14px;
}
.room__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.room__gal{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.room__gal::-webkit-scrollbar{ display:none; }
.room__shot{
  flex:0 0 auto;
  width:104px;
  aspect-ratio:4 / 3;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  scroll-snap-align:start;
}
.room__shot img{
  width:100%; height:100%;
  object-fit:cover;
}
.room__name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  color:var(--ink);
  line-height:1.2;
}
.room__meta{
  font-size:.78rem;
  color:var(--ink-soft);
  margin-top:2px;
}
.room__price{
  font-family:var(--font-display);
  font-weight:800;
  font-size:.98rem;
  color:var(--green-deep);
  margin-top:4px;
}
.room__was{
  font-family:var(--font-body, inherit);
  font-weight:600;
  font-size:.78rem;
  color:var(--ink-soft);
  text-decoration:line-through;
  margin-left:6px;
}
.room__btn{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  background:linear-gradient(135deg, var(--wa) 0%, var(--wa-deep) 100%);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  border-radius:11px;
  box-shadow:0 8px 16px -8px rgba(22,163,74,.7);
  white-space:nowrap;
}
.room__btn svg{ width:17px; height:17px; flex:0 0 auto; }
.room-hint{
  margin:6px 18px 4px;
  font-size:.78rem;
  color:var(--ink-soft);
  text-align:center;
}

/* ---------- Mini-formulário de reserva (dentro do .room) ---------- */
.room__form{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.room__form-row{
  display:flex;
  gap:8px;
}
.room__input{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  font-size:.9rem;
  color:var(--ink);
}
.room__input:focus{
  outline:none;
  border-color:var(--sun);
}
.room__form-row .room__input{ flex:1 1 0; min-width:0; }
.room__btn--form{
  width:100%;
  justify-content:center;
  border:none;
  cursor:pointer;
  font-family:inherit;
}

/* =========================================================
   ATENDIMENTO / CONCIERGE
   ========================================================= */
.concierge{
  margin:30px 18px 8px;
  padding:30px 22px;
  text-align:center;
  color:#fff;
  border-radius:26px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,199,64,.22), transparent 60%),
    linear-gradient(160deg, var(--green) 0%, var(--green-deep) 55%, var(--green-night) 100%);
  box-shadow:var(--shadow);
}
.concierge .eyebrow{ color:#0E3B2A; background:#FFD98A; }
.concierge h2{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; margin:10px 0 4px; }
.concierge p.note{ opacity:.9; font-size:.92rem; }

.phone-big{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.9rem;
  letter-spacing:.01em;
  margin:14px 0 6px;
  color:#fff;
}
.phone-big svg{ width:26px; height:26px; color:var(--gold); }

.concierge .btn-wa{ margin:18px auto 0; max-width:340px; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{
  margin-top:26px;
  padding:30px 22px 130px;
  text-align:center;
  background:
    linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%);
  border-top:1px solid var(--line);
}
.foot__logo{ width:84px; height:84px; border-radius:20px; margin:0 auto 12px; box-shadow:var(--shadow-sm); }
.foot__name{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink); }
.foot__regions{ color:var(--ink-soft); font-weight:700; margin:4px 0 14px; font-size:.92rem; }

.foot__badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-bottom:14px;
}
.foot__badges span{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line);
  color:var(--green-deep); font-weight:700; font-size:.78rem;
  padding:7px 12px; border-radius:999px;
}
.foot__badges svg{ width:15px; height:15px; color:var(--green); }

.foot__line{ color:var(--ink-soft); font-size:.86rem; margin:3px 0; }
.foot__line a{ color:var(--coral); font-weight:800; }
.foot__cnpj{ font-size:.78rem; color:#9AA59E; margin-top:8px; }

/* =========================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================= */
.fab{
  position:fixed;
  z-index:50;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--wa) 0%, var(--wa-deep) 100%);
  color:#fff;
  font-family:var(--font-display); font-weight:700;
  padding:14px 18px 14px 16px;
  border-radius:999px;
  box-shadow:0 16px 30px -10px rgba(22,163,74,.75);
  animation:fabIn .4s .6s both;
}
.fab svg{ width:26px; height:26px; }
.fab .fab__txt{ font-size:.98rem; white-space:nowrap; }
@keyframes fabIn{ from{ transform:translateY(80px); opacity:0; } to{ transform:none; opacity:1; } }
@media (min-width:560px){ .fab{ right:calc(50% - 270px + 16px); } }

/* =========================================================
   ACESSIBILIDADE / MOVIMENTO REDUZIDO
   ========================================================= */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; }
  /* sem auto-rolagem: o usuário desliza o carrossel manualmente */
  .carousel{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
  .carousel__track{ transform:none; }
  .carousel__item{ scroll-snap-align:center; }
}