/* =====================================================
    Siara — cidades.css (estilos específicos de cidades.html)
   ===================================================== */

/*=====================================*/
/* Organizado por seção:
/* 1. Body e Globais
/* 2. Hero (introdução da cidade)
/* 3. Mini-Cards
/* 4. Modal-Cards
/* 5. Resumo da plataforma
/* 6. Banner publicitário
/* 7. Mapa interativo
/* 8. Animações
/*=====================================*/

/* ───────────────────────────────────────────────────────────────
   1. BODY E GLOBAIS
────────────────────────────────────────────────────────────── */
body { background: #fff; font-family: 'Manrope', sans-serif;}
/* Antiga imagem de background
@media (min-width: 1024px) {
  body { background: linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)), url('/imagens/background.png') repeat-y center top; background-size: auto; }
}*/




/* ───────────────────────────────────────────────────────────────
   2. HERO (introdução da cidade)
────────────────────────────────────────────────────────────── */
#introducao {padding:0 3% 0 4%;}
.introducao { margin-top: 70px; width: 100%; height: 300px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; position: relative; }
/*.introducao::before { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(2, 2, 2, 0.01) 0%, rgba(255,205,130,.06) 50%, transparent 55%), linear-gradient(90deg, rgba(0,55,105,.80) 0%, rgba(0,80,130,.30) 25%, rgba(0,105,155,.12) 45%, transparent 65%); z-index: 1; }
*/.intro-spacer { border-radius: 12px; width: 100%; margin-top: -10px; height: 20px; background-color: white; transition: background-color .3s ease; }
body.dark-mode .intro-spacer { background-color: var(--bg); }
.introducao-nome-cidade{font-family:"League Spartan",sans-serif;font-size:65px;font-weight:900;line-height:.88;letter-spacing:-2px;width:fit-content;background:linear-gradient(90deg,#ff5500 0%,#ff7a00 25%,#ffbf00 50%,#ffd21c 75%,#ef338f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 3px 2px rgba(0,25,55,.2)) drop-shadow(0 8px 18px rgba(0,20,50,.18))}
.introducao span { font-family: "Sora", sans-serif; font-weight: 400; font-size: 13px; line-height: 1.2; letter-spacing: 0.2px; color: white;}
.introducao span .destaque { font-weight: 600; color:   #fff; }
.introducao-o-que-vamos-fazer-em { font-family: "Sora", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0.2px; color: #ff6b00; background: white; padding: 10px 20px; border-radius: 99px; width: fit-content; }
.introducao-hoje { margin:-15px 0 15px 0; font-family: 'Pacifico', cursive; font-style: italic;font-weight: 400; font-size: 50px; line-height: 1.2; letter-spacing: 0.2px; color: white; width: fit-content;}
.introducao-wrapper { position: relative; margin-top: 50px; }
.introducao { position: relative; z-index: 2; width: 100%; height: 300px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; }
.city-info-main { display: none; }
@media (min-width: 1024px) {
    .city-info-main { margin: 0 4%; }
    .introducao-o-que-vamos-fazer-em { margin-bottom: 20px; }
    .introducao-nome-cidade { font-size: 80px; }
}

/* ───────────────────────────────────────────────────────────────
   3. MINI-CARDS
────────────────────────────────────────────────────────────── */
.secaoCards { padding-top:10px; scroll-margin-top: 80px; }
.secaoCards-titulo { font-weight: 800; font-size: 18px; margin: 0 0 0 15px; letter-spacing: -1px; }
.carrossel1 { color: #000000d0; display: flex; overflow-x: auto; gap: 8px; padding: 10px 15px; scrollbar-width: none; -ms-overflow-style: none; }
.card1 { cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; width: 240px; height: 230px; min-width: 240px; min-height: 230px;border-radius: 12px; overflow: hidden; border: none; 
box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 -2px 3px rgba(0,0,0,0.05), 2px 0 3px rgba(0,0,0,0.05), -2px 0 3px rgba(0,0,0,0.05);; background-color: #fff; }
.card1::-webkit-scrollbar { display: none; }
.card1:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.30); }
.card1-img { width: 100%; height: 100px; object-fit: cover;}
.card1-text { height: 100%; padding: 10px 5px 0 10px; align-items: start; display:flex; flex-direction:column; gap:3px;}
.card1-titulo { font-size: 14px; font-weight: 700; letter-spacing: -0.7px;}
.card1-descricao { font-size: 13px; font-weight: 500; color: #00000080; letter-spacing: -0.3px; line-height: 15px; }
.card1-status { font-size: 13px; font-weight: 500; color: #00000080; }
.card1-rodape { padding: 0px 10px 10px 10px; display:flex; flex-direction:column; gap:3px;}
.card1-avaliacoes { font-size: 13px; font-weight: 500; color: #00000080; }
.card-1-btn { background: #9700ff;}
@media (min-width: 1024px) {
    .secaoCards { margin: 0 3%; }
    .card1 { width: 280px; min-width: 280px; height: 220px; min-height: 220px; }
}

/* ───────────────────────────────────────────────────────────────
   4. MODAL-CARDS
────────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(5px); z-index:10000; display:flex; align-items:center; justify-content:center; padding:15px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.modal-overlay.show { opacity:1; pointer-events:all; }
.modal-card { background:var(--surface); border-radius:24px; max-width:480px; width:100%; overflow:hidden; box-shadow:var(--shadow-lg); position:relative; max-height:90vh; overflow-y:auto; transform:translateY(24px); transition:transform .3s cubic-bezier(.4,0,.2,1); scrollbar-width:none; }
.modal-card::-webkit-scrollbar { display:none; }
.modal-overlay.show .modal-card { transform:translateY(0); }
.modal-close { position:absolute; top:12px; right:12px; z-index:10; background:rgba(0,0,0,.45); border:none; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; backdrop-filter:blur(8px); transition:background .2s; }
.modal-close:hover { background:rgba(0,0,0,.7); }
.modal-close i { width:18px; height:18px; }
.modal-banner img { width:100%; height:240px; object-fit:cover; display:block; }
.modal-banner .banner-fallback { height:240px; display:flex; align-items:center; justify-content:center; }
.modal-body { padding:24px 20px 24px 22px; }
.modal-badge { display:inline-block; border-radius:20px; padding:5px 14px; font-size:.65rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; margin-bottom:14px; }
.modal-body h2 { font-size:1.3rem; font-weight:800; color:var(--dark); margin-bottom:8px; line-height:1.3; }
.modal-desc { font-size:13px; color:var(--gray-2); line-height:1.2; margin-bottom:18px; }
.modal-meta { display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--gray-4); padding-top:16px; margin-bottom:20px; }
.modal-meta-item { display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:var(--gray-1); line-height:1.5; }
.modal-meta-item i { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--c1); }
.modal-actions { display:flex; gap:5px; flex-wrap:wrap; }
.modal-btn { font-family: 'Manrope', sans-serif; flex:1; min-width:80px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:8px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:.2s; }
.modal-btn i { font-size:16px; }
.modal-btn-ver-ingressos { background: #f59f0b; color: #fff;  }
.modal-btn-ver-ingressos i { font-size:16px; transform: rotate(-40deg); }
.modal-btn-compartilhar { background: #00000010; color: #000; width: 40px; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 12px; text-decoration: none;}
.modal-btn-compartilhar i { font-size:16px; }
.modal-btn-maps { background: var(--c1); color: #fff; }
.modal-btn-maps:hover { background: #0045cc; }
.modal-btn-site { background: var(--gray-4); color: var(--dark); }
.modal-btn-site:hover { filter: brightness(.93); }
.modal-carousel{position:relative;width:100%;height:240px;overflow:hidden;background:var(--gray-4); display:flex;align-items:center;justify-content:center}
.modal-carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.modal-carousel-slide.active{opacity:1}
.modal-carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.modal-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:none;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s;z-index:5}
.modal-carousel-arrow:hover{background:rgba(0,0,0,.7)}
.modal-carousel-arrow.prev{left:10px}
.modal-carousel-arrow.next{right:10px}
.modal-carousel-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:5}
.modal-carousel-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:all .2s ease}
.modal-carousel-dot.active{background:#fff;width:18px;border-radius:4px}
/* MODAL-CARD - PONTO TURISTICO*/
.modal-btn-ver-rotas { background: #1877F2; color: #fff;  }
.modal-btn-ver-rotas i { font-size:16px; }
.modal-btn-ver-rotas-2 { background: #00000010; color: #1877F2; width: 40px; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 12px; text-decoration: none;}
.modal-btn-ver-rotas-2 i { font-size:16px;  }
.modal-ponto-turistico-avaliacoes-status { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.modal-btn-fazer-reserva { background: #1877F2; color: #fff; }


/* ───────────────────────────────────────────────────────────────
   5. RESUMO DA PLATAFORMA
────────────────────────────────────────────────────────────── */
.label1 { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; color: #000;}
.label2 { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; color: #64748B;}
.secao-resumo-da-plataforma { display:flex; flex-direction:row; justify-content:space-between; gap:10px; margin:15px; padding:10px; background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 -2px 4px rgba(0,0,0,0.05), 2px 0 4px rgba(0,0,0,0.05), -2px 0 4px rgba(0,0,0,0.05);border-radius: 10px; }
@media (min-width: 1024px){
    .secao-resumo-da-plataforma { margin: 20px 11%; padding: 10px 40px;}
}

/* ───────────────────────────────────────────────────────────────
   6. BANNER PUBLICITÁRIO
────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────
   7. MAPA INTERATIVO
────────────────────────────────────────────────────────────── */
.mapa-header { display:flex; position: fixed; z-index: 1001; right: 5px; top:5px; }
.mapa-legendas { display:flex; flex-direction:column; align-items:flex-start; gap: 2px; position: fixed; z-index: 1001; bottom: 70px; left:5px;}
#mapa-interativo { max-height: 0; overflow: hidden;transition: max-height 0.4s ease; }
#mapa-interativo.aberto { background: white; margin-top: 63px;max-height: 100%; position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 900;}
#mapa-interativo-wrap { height:1000px;}
#leaflet-map { width: 100%; height: 100%; }
@media (min-width: 1024px) { 
    #mapa-interativo.aberto { margin-top:60px; max-height: 100%; border:2px solid #ddd;}
}

/* ───────────────────────────────────────────────────────────────
   8. ANIMAÇÕES
────────────────────────────────────────────────────────────── */
@keyframes digitar { 0%, 32%, 100% { opacity: 0; width: 0; }1% { opacity: 1; width: 0; animation-timing-function: steps(var(--steps), end); } 15%, 30% { opacity: 1; width: calc(var(--steps) * 0.65em); } }
@keyframes piscar { 0%, 100% { border-color: transparent; } 50% { border-color: #fff; } }