/* ===========================================================
   Férias Portugal — Tema visual (redesign homepage / mockup)
   Paleta azulejo/rio/areia + Bricolage Grotesque.
   Carregado DEPOIS do style.css (sobrepõe onde é preciso).
   Componentes da homepage isolados sob .hp para não mexer
   nas páginas internas.
   =========================================================== */

:root {
  --azul-profundo:#14425C; --azulejo:#2E6F95; --azulejo-claro:#DCEAF2;
  --rio:#2F7D5F; --rio-claro:#E3F0EA; --areia:#F7F3EA; --cal:#FFFFFF;
  --ardosia:#33404A; --cinza:#6B7A85; --sol:#E0A438;
  --hp-radius:14px; --hp-maxw:1120px;
}

/* Tipografia global (refresh do site inteiro) */
body { font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--ardosia); }
h1, h2, h3 { font-family:'Bricolage Grotesque', 'Inter', sans-serif; line-height:1.15; }

/* Container do mockup */
.wrap { max-width:var(--hp-maxw); margin:0 auto; padding:0 24px; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--azulejo); display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.eyebrow::before { content:""; width:22px; height:22px; border-radius:4px; opacity:.85;
  background:conic-gradient(from 0deg at 50% 50%, var(--azulejo) 0 25%, transparent 0 50%, var(--azulejo) 0 75%, transparent 0); }
.eyebrow.rio { color:var(--rio); }
.eyebrow.rio::before { background:conic-gradient(from 45deg at 50% 50%, var(--rio) 0 25%, transparent 0 50%, var(--rio) 0 75%, transparent 0); }

/* ── HEADER (global, refrescado sobre as classes existentes) ── */
.site-header { position:sticky; top:0; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid #E8E4DA; z-index:50; }
.site-header .header-inner { height:64px; }
.site-header .brand { font-family:'Bricolage Grotesque'; font-weight:800; font-size:20px; color:var(--azul-profundo); gap:9px; }
.site-header .main-nav a { color:var(--ardosia); font-weight:500; }
.site-header .main-nav a:hover { color:var(--azulejo); }
.site-header .main-nav a.destaque { color:var(--rio); font-weight:600; }
.site-header .lang-switcher .lang-link { color:var(--cinza); font-weight:600; }
.site-header .lang-switcher .lang-link.is-active { color:var(--azul-profundo); border-bottom:2px solid var(--sol); }

/* ── FOOTER (global, refrescado) ── */
.site-footer { background:var(--azul-profundo); color:#C6D6E0; }
.site-footer h3, .site-footer h4 { font-family:'Bricolage Grotesque'; color:var(--cal); font-size:15px; margin-bottom:12px; }
.site-footer a { color:#C6D6E0; }
.site-footer a:hover { color:var(--cal); }
.site-footer .footer-account a { color:#9DB4C2; font-size:13px; }

/* ===========================================================
   HOMEPAGE — componentes (isolados sob .hp)
   =========================================================== */
.hp { color:var(--ardosia); }
.hp .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:100px; font-weight:600; font-size:15.5px; transition:transform .15s; }
.hp .btn:hover { transform:translateY(-2px); }
.hp .btn-primario { background:var(--cal); color:var(--azul-profundo); }
.hp .btn-afiliado { background:var(--sol); color:#3A2C08; }

/* Hero */
.hp .hero { background:linear-gradient(160deg,var(--azul-profundo) 0%,var(--azulejo) 78%,#3C86AE 100%); color:var(--cal); position:relative; overflow:hidden; }
/* Foto de fundo do herói */
.hp .hero-bg { position:absolute; inset:0; z-index:0; display:block; }
.hp .hero-bg img { width:100%; height:100%; object-fit:cover; display:block; }
/* Véu — mais leve, para a foto respirar (texto continua legível pela sombra) */
.hp .hero-shade { position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, rgba(15,50,72,.78) 0%, rgba(20,66,92,.55) 48%, rgba(46,111,149,.32) 100%); }
.hp .hero::after { content:""; position:absolute; right:-60px; bottom:-60px; width:300px; height:300px; opacity:.08; transform:rotate(12deg); z-index:0;
  background:conic-gradient(from 0deg at 50% 50%, #fff 0 25%, transparent 0 50%, #fff 0 75%, transparent 0); background-size:56px 56px; }
/* Banner mais baixo */
.hp .hero-inner { padding:54px 24px 56px; position:relative; z-index:1; max-width:var(--hp-maxw); margin:0 auto; }

/* Animação de entrada do herói (palavras do H1 em cascata) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
  .hp .hero h1 .w { display:inline-block; animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both; }
  .hp .hero .badge   { animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both; animation-delay:.02s; }
  .hp .hero p.sub    { animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both; animation-delay:.42s; }
  .hp .hero .cta-row { animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both; animation-delay:.54s; }
  .hp .hero .cta-nota{ animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both; animation-delay:.66s; }
}
.hp .hero .badge { display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:100px; padding:6px 16px; font-size:13px; font-weight:600; margin-bottom:22px; }
.hp .hero h1 { font-size:clamp(38px,5.4vw,60px); font-weight:800; max-width:16ch; text-shadow:0 2px 20px rgba(0,0,0,.28); }
.hp .hero p.sub, .hp .hero .badge { text-shadow:0 1px 10px rgba(0,0,0,.25); }
.hp .hero p.sub { font-size:19px; max-width:54ch; margin:18px 0 34px; opacity:.92; }
.hp .cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.hp .cta-nota { font-size:12px; opacity:.72; margin-top:12px; }

/* Intro SEO */
.hp .intro { background:var(--areia); padding:56px 0; }
.hp .intro .wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; }
.hp .intro h2 { font-size:27px; color:var(--azul-profundo); margin-bottom:14px; }
.hp .intro p { color:#4A5560; margin-bottom:12px; }
.hp .stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hp .stat { background:var(--cal); border-radius:var(--hp-radius); padding:20px; border:1px solid #EAE5D8; }
.hp .stat b { font-family:'Bricolage Grotesque'; font-size:26px; color:var(--azulejo); display:block; }
.hp .stat span { font-size:13px; color:var(--cinza); }

/* Secções */
.hp section.bloco { padding:64px 0; }
.hp .sec-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.hp .sec-head h2 { font-size:30px; color:var(--azul-profundo); }
.hp .ver-todos { font-size:14.5px; font-weight:600; color:var(--azulejo); white-space:nowrap; }
.hp .grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.hp .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.hp .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hp .card { border-radius:var(--hp-radius); overflow:hidden; background:var(--cal); border:1px solid #ECE8DE; transition:transform .15s,box-shadow .15s; display:block; }
.hp .card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(20,66,92,.12); }
.hp .foto { height:130px; position:relative; background-size:cover; background-position:center; }
.hp .foto.alta { height:150px; }
.hp .card-body { padding:16px 18px 18px; }
.hp .card-body h3 { font-size:17px; color:var(--azul-profundo); margin-bottom:6px; }
.hp .card-body p { font-size:13.5px; color:var(--cinza); }
.hp .card-link { font-size:13.5px; font-weight:600; color:var(--azulejo); margin-top:10px; display:inline-block; }
.hp .pill { position:absolute; top:10px; left:10px; background:rgba(255,255,255,.92); border-radius:100px; padding:4px 11px; font-size:11.5px; font-weight:600; color:var(--rio); display:flex; align-items:center; gap:5px; }
.hp .pill .dot { width:7px; height:7px; border-radius:50%; background:var(--sol); }

/* Praias fluviais */
.hp .fluviais { background:var(--rio-claro); }
.hp .fluviais .sec-head h2 { color:#1E4F3E; }
.hp .fluviais .card { border-color:#D7E8DE; }
.hp .fluviais .card-link { color:var(--rio); }
.hp .meta-rio { display:flex; gap:10px; margin-top:9px; font-size:12px; color:#4E6A5C; font-weight:500; flex-wrap:wrap; }
.hp .meta-rio span { background:#EDF6F0; border-radius:6px; padding:3px 8px; }

/* Tipos */
.hp .tipos { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.hp .tipo { background:var(--azulejo-claro); border-radius:var(--hp-radius); padding:22px 18px; font-weight:600; font-size:15px; color:var(--azul-profundo); transition:background .15s; }
.hp .tipo:hover { background:#CBDFEC; }
.hp .tipo em { display:block; font-style:normal; font-weight:400; font-size:12.5px; color:var(--cinza); margin-top:5px; }

/* Artigos */
.hp .data { font-size:12px; color:var(--cinza); text-transform:uppercase; letter-spacing:.08em; font-weight:600; display:block; margin-bottom:6px; }

/* FAQ */
.hp .faq { background:var(--areia); }
.hp .faq details { background:var(--cal); border:1px solid #EAE5D8; border-radius:var(--hp-radius); padding:18px 22px; margin-bottom:12px; max-width:760px; }
.hp .faq summary { font-weight:600; font-size:16px; color:var(--azul-profundo); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.hp .faq summary::-webkit-details-marker { display:none; }
.hp .faq summary::after { content:"+"; font-size:22px; color:var(--azulejo); font-weight:400; }
.hp .faq details[open] summary::after { content:"–"; }
.hp .faq details p { margin-top:10px; font-size:14.5px; color:#4A5560; }

/* ── Animações ao scroll (site inteiro) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); will-change:opacity, transform; }
  .reveal.in { opacity:1; transform:none; }
  /* pequeno efeito escalonado para cards dentro de grelhas */
  .grid-5 .reveal:nth-child(2), .grid-4 .reveal:nth-child(2), .grid-3 .reveal:nth-child(2), .tipos .reveal:nth-child(2) { transition-delay:.06s; }
  .grid-5 .reveal:nth-child(3), .grid-4 .reveal:nth-child(3), .grid-3 .reveal:nth-child(3), .tipos .reveal:nth-child(3) { transition-delay:.12s; }
  .grid-5 .reveal:nth-child(4), .grid-4 .reveal:nth-child(4), .tipos .reveal:nth-child(4) { transition-delay:.18s; }
  .grid-5 .reveal:nth-child(5), .tipos .reveal:nth-child(5) { transition-delay:.24s; }
}

@media (max-width:900px) {
  .hp .intro .wrap, .hp .grid-5, .hp .grid-4, .hp .grid-3, .hp .tipos { grid-template-columns:1fr 1fr; }
  .hp .hero-inner { padding:40px 24px 44px; }
}
@media (max-width:560px) {
  .hp .grid-5, .hp .grid-4, .hp .grid-3, .hp .tipos, .hp .intro .wrap { grid-template-columns:1fr; }
}