/* =====================================================================
   fortimceara.com.br — folha de estilo do site
   ---------------------------------------------------------------------
   Um arquivo só para as 64 páginas (pt/en/fr, blog e guias). Antes disto
   o mesmo CSS estava colado dentro de cada página: mexer numa cor dava 64
   edições. Agora é aqui — e o navegador baixa uma vez só para o site todo.

   A ordem das regras importa (o que vem depois vence), então seções novas
   entram no fim, junto das MELHORIAS.

   ÍNDICE — à direita, o nome do marcador de cada seção (busque por ele).
   Aqui dentro o nome vai sem a barra e o asterisco: comentário de CSS não
   aninha, fecharia no primeiro marcador e o navegador jogaria fora a
   primeira regra do arquivo (o reset logo abaixo).
     1. Base e variáveis de cor ....... topo
     2. Nav e menu do celular ......... NAV
     3. Capa .......................... HERO
     4. Atalhos ....................... QUICK NAV
     5. Blocos de seção ............... SECTIONS
     6. Introdução e números .......... INTRO
     7. O que fazer ................... O QUE FAZER
     8. Praias ........................ PRAIAS
     9. Restaurantes .................. RESTAURANTES
    10. Clima ......................... CLIMA
    11. Como chegar ................... COMO CHEGAR
    12. Hospedagem e "anuncie" ........ HOSPEDAGEM
    13. Dicas ......................... DICAS
    14. Chamada final ................. CTA FINAL
    15. Botão flutuante do WhatsApp ... WA FLOAT
    16. Rodapé ....................... FOOTER
    17. Animação de entrada ........... ANIM
    18. Celular e tablet .............. RESPONSIVE
    19. Cards extras de restaurante ... EXTRA RESTAURANTES
    20. Passeios e contatos ........... PASSEIOS SECTION
    21. Troca de idioma ............... LANGUAGE SWITCHER
    22. Aviso de idioma ............... SUGESTAO DE IDIOMA
    23. Páginas de onde comer ......... ONDE COMER
    24. Acessibilidade e impressão .... MELHORIAS
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ocean:#003D52;--ocean2:#005170;
  --teal:#0097B2;--teal2:#00BCD4;
  --sun:#FFB300;--sun2:#FFD740;
  --coral:#FF6B35;--coral2:#FF8C5A;
  --green:#2ECC71;
  --bg:#F0FAFF;--bg2:#E0F5FB;
  --white:#FFFFFF;--text:#003344;--text2:#005066;
  --light-text:#0077A0;
  --serif:'Nunito','Nunito Fallback',sans-serif;
  --sans:'Poppins','Poppins Fallback',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--serif);font-size:15px;font-weight:400;line-height:1.7;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;transition:all .3s}
nav.scrolled{background:rgba(0,61,82,.97);backdrop-filter:blur(12px);padding:12px 48px;box-shadow:0 2px 20px rgba(0,61,82,.3)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-badge{width:36px;height:36px;background:var(--sun);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.nav-logo-text{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--white)}
.nav-logo-text span{color:var(--sun)}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--sun)}
.nav-cta{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);background:var(--sun);border:none;padding:10px 22px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;transition:all .2s}
.nav-cta:hover{background:var(--sun2);transform:translateY(-1px)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:transparent;border:2px solid rgba(255,255,255,.4);border-radius:6px;cursor:pointer;padding:0 8px}
.nav-burger span{display:block;height:2px;width:100%;background:var(--white);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:99;background:rgba(0,61,82,.99);display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.mmenu.open{display:flex}
.mmenu a{font-family:var(--sans);font-size:22px;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:10px 24px;border-radius:8px;transition:all .2s}
.mmenu a:hover{color:var(--sun);background:rgba(255,179,0,.1)}
.mmenu .m-cta{margin-top:16px;background:var(--sun);color:var(--ocean);padding:14px 40px;border-radius:8px}

/* HERO */
/* O texto do hero (selo, título, subtítulo e botões) já nasce visível, sem
   fadeUp: é o que está na tela ao abrir a página e o maior elemento dela.
   Com opacity 0 no começo o Chrome não o conta como LCP, e o LCP medido
   virava o logo do menu. Só os enfeites (números e "scroll") entram animados. */
.hero{min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,40,60,.3) 0%,rgba(0,40,60,.2) 40%,rgba(0,40,60,.85) 100%),url('/images/fortim-ceara-vista-aerea.jpg') center/cover no-repeat,linear-gradient(160deg,#0097B2,#003D52)}
.hero-content{position:relative;z-index:2;padding:0 48px 80px;max-width:820px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--sun);color:var(--ocean);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:20px;margin-bottom:20px}
.hero-title{font-family:var(--sans);font-size:clamp(52px,7vw,100px);font-weight:800;line-height:.95;color:var(--white);margin-bottom:16px}
.hero-title span{color:var(--sun)}
.hero-sub{font-size:16px;font-weight:400;color:rgba(255,255,255,.75);max-width:520px;margin-bottom:36px;line-height:1.75}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-sun{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ocean);background:var(--sun);border:none;padding:14px 28px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.btn-sun:hover{background:var(--sun2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,179,0,.4)}
.btn-outline-w{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--white);background:transparent;border:2px solid rgba(255,255,255,.5);padding:12px 28px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.btn-outline-w:hover{border-color:var(--white);background:rgba(255,255,255,.12)}
.hero-scroll{position:absolute;right:48px;bottom:60px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp .8s 1.1s forwards}
.hero-scroll span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);writing-mode:vertical-rl}
.hero-scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,rgba(255,179,0,.5),transparent);animation:lineGrow 1.5s 1.3s forwards;transform-origin:top;transform:scaleY(0)}
.hero-stats{position:absolute;right:48px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;opacity:0;animation:fadeUp .8s 1s forwards}
.hero-stat{background:rgba(0,40,60,.7);backdrop-filter:blur(10px);border:1px solid rgba(255,179,0,.3);border-radius:10px;padding:14px 18px;text-align:center}
.hero-stat-val{font-family:var(--sans);font-size:22px;font-weight:800;color:var(--sun)}
.hero-stat-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* QUICK NAV */
.quick-nav{background:var(--ocean);padding:0 48px}
.quick-nav-inner{max-width:1200px;margin:0 auto;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.quick-nav-inner::-webkit-scrollbar{display:none}
.qn-item{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;padding:18px 24px;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s;flex-shrink:0}
.qn-item:hover{color:var(--sun);border-bottom-color:var(--sun)}

/* SECTIONS */
.sec{padding:90px 48px}
.inner{max-width:1200px;margin:0 auto}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:16px}
.tag-ocean{background:rgba(0,151,178,.15);color:var(--teal)}
.tag-sun{background:rgba(255,179,0,.15);color:#C68800}
.tag-coral{background:rgba(255,107,53,.15);color:var(--coral)}
.tag-green{background:rgba(46,204,113,.15);color:#1A9B52}
.stitle{font-family:var(--sans);font-size:clamp(30px,4vw,46px);font-weight:800;color:var(--text);line-height:1.05;margin-bottom:12px}
.stitle span{color:var(--teal)}
.stitle.inv{color:var(--white)}
.stitle.inv span{color:var(--sun)}
.sdesc{font-size:15px;color:var(--text2);line-height:1.85;max-width:600px;margin-bottom:40px}
.sdesc.inv{color:rgba(255,255,255,.65)}
/* Link no meio do texto: sem isto sai no azul e roxo do navegador. Vale para
   o link que não traz classe nem estilo próprio. */
.sdesc a:not([class]):not([style]),.dica-text a:not([class]):not([style]){color:var(--ocean2);font-weight:700}
.sdesc.inv a:not([class]):not([style]){color:var(--sun)}

/* INTRO */
.intro-sec{background:var(--white);padding:70px 48px}
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.intro-text p{font-size:15px;color:var(--text2);line-height:1.9;margin-bottom:18px}
.intro-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:20px;border:2px solid;transition:all .2s}
.chip-ocean{border-color:var(--teal);color:var(--teal)}
.chip-ocean:hover{background:var(--teal);color:#fff}
.intro-visual{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px}
.intro-img-big{grid-column:span 2;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.intro-img-sm{border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.intro-img-big img,.intro-img-sm img,.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.img-fallback-1{background:linear-gradient(135deg,#0097B2 0%,#003D52 100%);width:100%;height:100%}
.img-fallback-2{background:linear-gradient(135deg,#FFB300 0%,#E87B1A 100%);width:100%;height:100%}
.img-fallback-3{background:linear-gradient(135deg,#2ECC71 0%,#1A9B52 100%);width:100%;height:100%}
.num-band{background:var(--ocean);padding:40px 48px}
.num-band-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.num-item{padding:24px 32px;border-right:1px solid rgba(255,255,255,.08);text-align:center}
.num-item:last-child{border-right:none}
.num-val{font-family:var(--sans);font-size:36px;font-weight:800;color:var(--sun);margin-bottom:4px}
.num-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* O QUE FAZER */
.ofazer{background:var(--bg);padding:90px 48px}
.ofazer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.of-card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(0,61,82,.08);transition:all .3s;cursor:default}
.of-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,61,82,.14)}
.of-card-img{height:180px;position:relative;overflow:hidden}
.of-card-img-bg{width:100%;height:100%;transition:transform .6s}
.of-card:hover .of-card-img-bg{transform:scale(1.05)}
.of-img-kit{background:linear-gradient(135deg,#0097B2 0%,#005170 100%)}
.of-img-buggy{background:linear-gradient(135deg,#E87B1A 0%,#8B3A00 100%)}
.of-img-barco{background:linear-gradient(135deg,#2ECC71 0%,#1A5C3A 100%)}
.of-img-praia{background:linear-gradient(135deg,#00BCD4 0%,#003D52 100%)}
.of-img-gastro{background:linear-gradient(135deg,#FF6B35 0%,#C0390C 100%)}
.of-img-caval{background:linear-gradient(135deg,#FFB300 0%,#7A5200 100%)}
.of-img-noite{background:linear-gradient(135deg,#9C27B0 0%,#4A0080 100%)}
.of-img-fest{background:linear-gradient(135deg,#F44336 0%,#880E4F 100%)}
.of-img-pet{background:linear-gradient(135deg,#607D8B 0%,#263238 100%)}
.of-card-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:52px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.of-card-tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);color:#fff;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:12px}
.of-card-body{padding:22px}
.of-card-title{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.2}
.of-card-desc{font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:14px}
.of-card-tips{display:flex;flex-direction:column;gap:4px}
.of-tip{font-size:11px;color:var(--light-text);font-weight:600;display:flex;align-items:center;gap:6px}
.of-tip::before{content:'→';color:var(--teal)}

/* PRAIAS */
.praias-sec{background:var(--ocean);padding:90px 48px}
.praias-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;margin-top:48px}
.praia-card{position:relative;border-radius:14px;overflow:hidden;cursor:default}
.praia-card:first-child{grid-row:span 2;aspect-ratio:3/4}
.praia-card:not(:first-child){aspect-ratio:4/3}
.praia-bg{position:absolute;inset:0;transition:transform .6s}
.praia-card:hover .praia-bg{transform:scale(1.05)}
.praia-bg-1{background:url('/images/fortim-ceara-vista-aerea.jpg') center/cover,linear-gradient(135deg,#0097B2,#003D52)}
.praia-bg-3{background:url('/images/fortim-ceara-dunas.jpg') center/cover,linear-gradient(135deg,#FFB300,#003D52)}
.praia-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,30,48,.92) 0%,transparent 55%)}
.praia-badge{position:absolute;top:14px;left:14px;background:var(--sun);color:var(--ocean);font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:10px}
.praia-info{position:absolute;bottom:0;left:0;right:0;padding:20px}
.praia-cat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
.praia-name{font-family:var(--sans);font-size:clamp(18px,2.2vw,26px);font-weight:700;color:var(--white);line-height:1.15;margin-bottom:6px}
.praia-chips{display:flex;gap:5px;flex-wrap:wrap}
.praia-chip{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--sun);background:rgba(255,179,0,.15);border:1px solid rgba(255,179,0,.3);padding:2px 8px;border-radius:8px}
.praias-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.pcard-praia{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,179,0,.15);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .3s}
.pcard-praia:hover{border-color:rgba(255,179,0,.4);transform:translateY(-3px)}
.pcard-praia-star{background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.3);color:var(--sun);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;width:fit-content}
.pcard-praia-icon{font-size:28px}
.pcard-praia-name{font-family:var(--sans);font-size:18px;font-weight:800;color:var(--white);line-height:1.15}
.pcard-praia-chips{display:flex;flex-wrap:wrap;gap:4px}
.pcard-praia-desc{font-size:13px;color:rgba(255,255,255,.5);line-height:1.75;flex:1}
.pcard-praia-access{font-size:11px;font-weight:600;color:rgba(255,255,255,.32);padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.pcard-praia-map{font-size:11px;font-weight:700;color:var(--sun);text-decoration:none;transition:opacity .2s;display:inline-block;margin-top:4px}
.pcard-praia-map:hover{opacity:.7}

/* RESTAURANTES */
.rest-sec{background:var(--white);padding:90px 48px}
.rest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:48px}
.rest-card{background:var(--bg);border-radius:14px;padding:24px;display:flex;gap:18px;align-items:flex-start;transition:all .3s;border:2px solid transparent}
.rest-card:hover{border-color:rgba(0,151,178,.2);background:var(--bg2);transform:translateY(-2px)}
.rest-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.ri-fr{background:rgba(255,179,0,.15)}
.ri-bk{background:rgba(0,151,178,.15)}
.ri-pz{background:rgba(255,107,53,.15)}
.ri-int{background:rgba(46,204,113,.15)}
.ri-fish{background:rgba(0,97,172,.15)}
.ri-sea{background:rgba(0,188,212,.15)}
.rest-info{flex:1}
.rest-name{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--text);margin-bottom:4px}
.rest-type{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.rest-desc{font-size:13px;color:var(--text2);line-height:1.7}

/* CLIMA */
.clima-sec{background:var(--sun);padding:80px 48px}
.clima-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.clima-text .stitle{color:var(--ocean)}
.clima-text .stitle span{color:var(--ocean2)}
.clima-text p{font-size:15px;color:var(--ocean2);line-height:1.85;margin-bottom:16px}
.meses{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.mes{background:rgba(0,61,82,.1);border-radius:10px;padding:12px 8px;text-align:center;transition:all .2s}
.mes.ok{background:rgba(0,61,82,.2)}
.mes.best{background:var(--ocean);border-radius:10px}
.mes-name{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);margin-bottom:4px}
.mes.best .mes-name{color:var(--sun)}
.mes-icon{font-size:16px;margin-bottom:2px}
.mes-label{font-size:9px;color:var(--ocean2);font-weight:600}
.mes.best .mes-label{color:rgba(255,255,255,.7)}

/* COMO CHEGAR */
.chegar-sec{background:var(--bg);padding:90px 48px}
.chegar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.chegar-card{background:var(--white);border-radius:16px;padding:32px 24px;box-shadow:0 2px 16px rgba(0,61,82,.07);transition:all .3s}
.chegar-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,61,82,.12)}
.chegar-icon-wrap{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px}
.ci-car{background:rgba(0,151,178,.12)}
.ci-fly{background:rgba(255,179,0,.15)}
.ci-bus{background:rgba(255,107,53,.12)}
.chegar-title{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px}
.chegar-from{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.chegar-desc{font-size:13px;color:var(--text2);line-height:1.8;margin-bottom:12px}
.chegar-time{display:inline-flex;align-items:center;gap:6px;background:rgba(0,151,178,.1);color:var(--teal);font-size:11px;font-weight:700;padding:5px 12px;border-radius:8px}

/* HOSPEDAGEM */
.hosp-sec{background:var(--ocean);padding:90px 48px}
.hosp-card{background:rgba(255,255,255,.06);border:2px solid rgba(255,179,0,.3);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;margin-top:48px}
.hosp-img{position:relative;min-height:480px;overflow:hidden}
.hosp-img-bg{position:absolute;inset:0;background:url('/images/fortim-ceara-hospedagem.jpg') center/cover,linear-gradient(135deg,#0097B2,#003D52);transition:transform .6s}
.hosp-card:hover .hosp-img-bg{transform:scale(1.04)}
.hosp-badge{position:absolute;top:18px;left:18px;background:var(--sun);color:var(--ocean);font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:10px}
.hosp-content{padding:48px;display:flex;flex-direction:column;gap:20px;justify-content:center}
.hosp-title{font-family:var(--sans);font-size:clamp(28px,3vw,40px);font-weight:800;color:var(--white);line-height:1.05}
.hosp-title span{color:var(--sun)}
.hosp-loc{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hosp-rating{display:flex;align-items:center;gap:8px}
.hosp-stars{color:var(--sun);font-size:15px;letter-spacing:2px}
.hosp-rt{font-size:12px;color:rgba(255,255,255,.5)}
.hosp-feats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hf{background:rgba(255,255,255,.07);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.65)}
.hf-icon{font-size:16px}
.hosp-ctas{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cta-wa{display:flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:14px 24px;border-radius:10px;text-decoration:none;transition:all .2s}
.cta-wa:hover{background:#1EBB55;transform:translateY(-2px)}
.cta-web{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,179,0,.15);border:2px solid var(--sun);color:var(--sun);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px 24px;border-radius:10px;text-decoration:none;transition:all .2s}
.cta-web:hover{background:var(--sun);color:var(--ocean)}
.hosp-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:44px}
.hosp-mini-card{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,179,0,.2);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .3s}
.hosp-mini-card:hover{border-color:rgba(255,179,0,.5);transform:translateY(-3px)}
.hmc-cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.hmc-name{font-family:var(--sans);font-size:20px;font-weight:800;color:var(--white);line-height:1.1}
.hmc-desc{font-size:13px;color:rgba(255,255,255,.5);line-height:1.75;flex:1}
.hmc-link{font-size:12px;font-weight:700;color:var(--sun);text-decoration:none;margin-top:6px;align-self:flex-start;transition:opacity .2s}
.hmc-link:hover{opacity:.75}
.hosp-anunciar{margin-top:48px;padding:36px;background:rgba(255,255,255,.04);border:2px solid rgba(255,179,0,.2);border-radius:16px;text-align:center}

/* DICAS */
.dicas-sec{background:var(--coral);padding:80px 48px}
.dicas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px}
.dica-card{background:rgba(255,255,255,.92);border-radius:14px;padding:26px;display:flex;gap:16px}
.dica-num{font-family:var(--sans);font-size:42px;font-weight:800;color:rgba(255,107,53,.2);line-height:1;flex-shrink:0;width:52px}
.dica-body{}
.dica-title{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px}
.dica-text{font-size:13px;color:var(--text2);line-height:1.8}

/* CTA FINAL */
.cta-final{background:linear-gradient(135deg,var(--teal) 0%,var(--ocean) 100%);padding:90px 48px;text-align:center}
.cta-inner{max-width:680px;margin:0 auto}

/* WA FLOAT */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);text-decoration:none;transition:all .2s}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.55)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* FOOTER */
footer{background:#001E2E;padding:64px 48px 32px}
.foot-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:24px}
.foot-brand-name{font-family:var(--sans);font-size:20px;font-weight:800;color:var(--white);margin-bottom:10px;display:block}
.foot-brand-name span{color:var(--sun)}
.foot-p{font-size:12px;color:rgba(255,255,255,.35);line-height:1.8;margin-bottom:14px}
.foot-link-box{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sun);text-decoration:none;border:2px solid rgba(255,179,0,.3);padding:7px 16px;border-radius:8px;transition:all .2s}
.foot-link-box:hover{background:rgba(255,179,0,.1);border-color:var(--sun)}
.foot-col h2{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:14px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-col li a{font-size:13px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.foot-col li a:hover{color:var(--sun)}
.foot-bottom{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.foot-bottom p,.foot-bottom a{font-size:11px;color:rgba(255,255,255,.2);text-decoration:none}

/* ANIM */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes lineGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* O texto nasce visivel: a classe .js, posta pelo js/site.js no <html>, e que
   liga a animacao. Sem JavaScript (ou se o script falhar) o conteudo aparece. */
.reveal{transition:opacity .7s ease,transform .7s ease}
html.js .reveal{opacity:0;transform:translateY(24px)}
html.js .reveal.visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
/* Com 9 itens (Hospedagem entrou em 31/10/2026) o inglês é o mais largo:
   com o espaço entre itens de 16px ele cabe numa linha a partir de uns
   1380px. Até 1520px o espaço cai de 24 para 16px, e abaixo de 1400px entra
   o menu de celular, com os idiomas encostados no botão do menu em vez de
   soltos no meio da barra. Medido em pt/en/fr: sobra 20px ou mais. */
@media(max-width:1520px){
  .nav-links{gap:16px}
}
@media(max-width:1400px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .lang-sw{margin-left:auto}
}
@media(max-width:900px){
  nav,nav.scrolled{padding:14px 20px}
  .hero-content{padding:0 20px 64px}
  .hero-stats{display:none}
  .hero-scroll{display:none}
  .quick-nav{padding:0 20px}
  .sec,.intro-sec,.ofazer,.praias-sec,.rest-sec,.clima-sec,.chegar-sec,.hosp-sec,.dicas-sec,.cta-final{padding:60px 20px}
  .num-band{padding:28px 20px}
  .num-band-inner{grid-template-columns:1fr 1fr;gap:2px}
  .num-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:16px}
  .intro-grid{grid-template-columns:1fr;gap:40px}
  .intro-visual{display:none}
  .ofazer-grid{grid-template-columns:1fr 1fr}
  .praias-list{grid-template-columns:1fr 1fr}
  .praias-grid{grid-template-columns:1fr}
  .praia-card:first-child{grid-row:auto;aspect-ratio:3/2}
  .rest-grid{grid-template-columns:1fr}
  .clima-grid{grid-template-columns:1fr}
  .meses{grid-template-columns:repeat(4,1fr)}
  .chegar-grid{grid-template-columns:1fr}
  .hosp-card{grid-template-columns:1fr}
  .hosp-img{min-height:260px}
  .dicas-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-bottom{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:500px){.ofazer-grid{grid-template-columns:1fr}.praias-list{grid-template-columns:1fr}}
/* EXTRA RESTAURANTES */
.rest-more{margin-top:48px}
.rest-more-title{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--light-text);padding-bottom:12px;border-bottom:2px solid var(--bg2);margin-bottom:20px}
.rmc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rmc{background:var(--bg);border:1.5px solid var(--bg2);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;transition:border-color .3s,transform .3s}
.rmc:hover{border-color:rgba(0,151,178,.3);transform:translateY(-2px)}
.rmc-icon{font-size:24px}.rmc-name{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.rmc-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,107,53,.12);color:var(--coral);padding:3px 8px;border-radius:10px;align-self:flex-start}
.rmc-desc{font-size:12px;color:var(--text2);line-height:1.7;flex:1}
.rmc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.rmc-wa{display:inline-flex;align-items:center;gap:5px;background:#25D366;color:#fff;font-size:11px;font-weight:700;padding:6px 12px;border-radius:7px;text-decoration:none;transition:background .2s}
.rmc-wa:hover{background:#1EBB55}
.rmc-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ocean2);border:1.5px solid rgba(0,97,178,.2);padding:5px 10px;border-radius:7px;text-decoration:none;transition:all .2s}
.rmc-link:hover{color:var(--ocean);border-color:rgba(0,97,178,.4)}
/* PASSEIOS SECTION */
.passeios-sec{background:var(--bg);padding:90px 48px}
.pcat{margin-top:44px}
.pcat-head{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid rgba(0,61,82,.1);display:flex;align-items:center;gap:8px}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:12px;margin-bottom:12px}
.cc{background:var(--white);border:1.5px solid var(--bg2);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;transition:border-color .3s,transform .3s}
.cc:hover{border-color:rgba(0,151,178,.25);transform:translateY(-2px)}
.cc-name{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.cc-sub{font-size:11px;font-weight:600;color:var(--light-text);text-transform:uppercase;letter-spacing:.07em}
.cc-desc{font-size:12px;color:var(--text2);line-height:1.7;flex:1}
.cc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.cc-wa{display:inline-flex;align-items:center;gap:5px;background:#25D366;color:#fff;font-size:11px;font-weight:700;padding:6px 12px;border-radius:7px;text-decoration:none;transition:background .2s}
.cc-wa:hover{background:#1EBB55}
.cc-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ocean2);border:1.5px solid rgba(0,97,178,.2);padding:5px 10px;border-radius:7px;text-decoration:none;transition:all .2s}
.cc-link:hover{color:var(--ocean);border-color:rgba(0,97,178,.4)}
@media(max-width:900px){.rmc-grid{grid-template-columns:1fr 1fr}.passeios-sec{padding:60px 28px}}
@media(max-width:500px){.rmc-grid{grid-template-columns:1fr}}

/* LANGUAGE SWITCHER */
.lang-sw{display:flex;gap:3px;align-items:center;margin-right:6px}
.ls-btn{font-size:10px;font-weight:700;color:rgba(255,255,255,.55);text-decoration:none;padding:4px 8px;border-radius:5px;border:1.5px solid transparent;transition:all .2s;letter-spacing:.03em;white-space:nowrap}
.ls-btn:hover{color:var(--sun);border-color:rgba(255,179,0,.3)}
.ls-btn.active{color:var(--sun);border-color:rgba(255,179,0,.35);background:rgba(255,179,0,.08)}
@media(max-width:900px){.lang-sw{gap:2px}.ls-btn{font-size:10px;padding:4px 6px}}
@media(max-width:600px){.lang-sw{gap:1px}.ls-btn{font-size:9px;padding:3px 5px}}
/* SUGESTAO DE IDIOMA */
.lang-sug{position:fixed;left:20px;bottom:20px;z-index:200;max-width:360px;background:var(--white);border:1.5px solid rgba(0,97,178,.14);border-radius:14px;box-shadow:0 12px 40px rgba(0,61,82,.22);padding:16px 18px;display:none;opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease}
.lang-sug.show{opacity:1;transform:translateY(0)}
.lang-sug-top{display:flex;align-items:flex-start;gap:10px}
.lang-sug-flag{font-size:22px;line-height:1.2}
.lang-sug-txt{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);line-height:1.5;flex:1}
.lang-sug-x{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:var(--light-text);opacity:.6;padding:0 2px;transition:opacity .2s}
.lang-sug-x:hover{opacity:1}
.lang-sug-btns{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.lang-sug-go{display:inline-flex;align-items:center;gap:6px;background:var(--sun);color:var(--ocean);font-family:var(--sans);font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:8px;text-decoration:none;transition:background .2s}
.lang-sug-go:hover{background:var(--sun2)}
.lang-sug-no{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--light-text);text-decoration:underline;padding:4px}
@media(max-width:600px){.lang-sug{left:12px;right:12px;bottom:12px;max-width:none;padding:14px 15px}}

/* ONDE COMER — páginas de restaurantes, café da manhã, almoço, jantar e bares */
.meal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.meal-nav a{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ocean2);text-decoration:none;padding:9px 16px;border-radius:999px;border:1.5px solid rgba(0,97,178,.25);transition:all .2s}
.meal-nav a:hover{border-color:var(--teal);color:var(--teal)}
.meal-nav.inv a{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.3)}
.meal-nav.inv a:hover{color:var(--white);border-color:var(--sun)}
.meal-nav a[aria-current]{background:var(--sun);border-color:var(--sun);color:var(--ocean)}
.meal-nav a[aria-current]:hover{color:var(--ocean)}
.eat-group+.eat-group{margin-top:56px}
.eat-group .rmc-grid,.eat-group .rest-grid{margin-top:24px}
.eat-group .rmc-name{margin:0}
a.rest-card{text-decoration:none;color:inherit}
a.rest-card .rest-name{margin-top:0}
.rest-go{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ocean2)}
.biz-feat{background:var(--bg);border:1.5px solid var(--bg2);border-radius:16px;padding:28px;max-width:760px}
.biz-facts{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin:0 0 22px;padding:0}
.biz-facts li{font-size:14px;color:var(--text2);line-height:1.5}
.biz-facts strong{color:var(--text)}
.biz-feat .rmc-links{padding-top:0}
.biz-feat .rmc-wa,.biz-feat .rmc-link{font-size:13px;padding:10px 16px}
@media(max-width:600px){.biz-facts{grid-template-columns:1fr}.biz-feat{padding:20px}}
@media print{.meal-nav{display:none}}

/* PAGINAS DE PRAIA — /praias/<praia>/ (pt/en/fr), geradas por _dev/praias/gerar.py */
.pr-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:10px}
.pr-resumo div{background:var(--white);border:1.5px solid rgba(0,151,178,.14);border-radius:14px;padding:18px}
.pr-resumo b{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.pr-resumo span{font-size:14px;color:var(--text2);line-height:1.6}
.pr-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px}
.pr-fotos figure{margin:0}
.pr-fotos a{display:block;border-radius:14px;overflow:hidden}
.pr-fotos img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.pr-fotos figcaption{font-size:12px;color:var(--text2);line-height:1.45;margin-top:8px}
.pr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:10px}
.pr-card{background:var(--white);border:1.5px solid rgba(0,151,178,.14);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px}
.pr-card-cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.pr-card-nome{font-family:var(--sans);font-size:18px;font-weight:800;color:var(--text);line-height:1.15}
.pr-card-desc{font-size:13px;color:var(--text2);line-height:1.7;flex:1}
.pr-card-link{font-size:12px;font-weight:700;color:var(--ocean2);text-decoration:none;align-self:flex-start}
.pr-card-link:hover{text-decoration:underline}
.hosp-mini-card.destaque{border-color:var(--sun);background:rgba(255,179,0,.08)}
.hmc-selo{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean);background:var(--sun);padding:3px 10px;border-radius:20px}
@media(max-width:600px){.pr-fotos{grid-template-columns:1fr 1fr;gap:10px}.pr-fotos figure:nth-child(3){display:none}}

/* "Anuncie seu negócio aqui": vai no fim de cada setor com negócios (pousadas,
   restaurantes, passeios, serviços...). O link abre o formulário do js/fc.js
   (data-fc-anunciar="tipo"). .inv é a versão para fundo escuro. */
.anuncie{margin:34px auto 0;max-width:760px;padding:16px 22px;border:1.5px dashed rgba(0,151,178,.4);border-radius:14px;font-size:14px;line-height:1.6;color:var(--text2);text-align:center}
.anuncie a{color:var(--ocean);font-weight:800;text-decoration:none}
.anuncie a:hover{text-decoration:underline}
.anuncie.inv{border-color:rgba(255,179,0,.45);color:rgba(255,255,255,.75)}
.anuncie.inv a{color:var(--sun)}

/* =====================================================================
   MELHORIAS — acessibilidade, movimento e impressão
   Vêm por último de propósito: só acrescentam, não mexem no visual atual.
   ===================================================================== */

/* Contorno visível para quem navega pelo teclado (Tab). Não aparece no
   clique de mouse, por causa do :focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}

/* Títulos com quebra de linha mais equilibrada (navegador que não conhece
   simplesmente ignora). */
.hero-title,.stitle,.of-card-title,.praia-name,.chegar-title{text-wrap:balance}

/* Cor da seleção de texto com a identidade do site. */
::selection{background:var(--sun);color:var(--ocean)}

/* Quem pede menos movimento no sistema (enjoo, vertigem) vê o conteúdo
   parado — e os blocos com .reveal aparecem na hora, sem depender da
   animação. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,html.js .reveal.visible{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Impressão: sai o que é de tela (menu, botão flutuante, avisos) e fica o
   conteúdo, em fundo branco. */
@media print{
  nav,.mmenu,.quick-nav,.wa-float,.lang-sug,.hero-scroll,.nav-burger{display:none!important}
  body{background:#fff;color:#000}
  html.js .reveal{opacity:1;transform:none}
  .sec,.inner{padding-left:0;padding-right:0}
  .of-card,.praia-card,.rest-card,.chegar-card,.dica-card,.hosp-mini-card{break-inside:avoid;page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;word-break:break-all}
}