/* Hero da pagina inicial v3 — "a costa agora" — Portal Turismo Portugal — 2026-10-07
 * Video real (Praia da Ursa, CDN) em ecra inteiro + pesquisa + 5 atalhos de intencao + cartao ao vivo "Hoje na costa".
 * Principios: 1.a impressao em ~50 ms (imagem real, pouco texto, contraste), lei de Hick (1 campo + 5 atalhos),
 * Fogg B=MAP (sugestao concreta + 1 toque), reciprocidade (dar informacao util antes de pedir o clique).
 */
.lh{
  --lh-gold:#c9a84c; --lh-gold-l:#e8c97a; --lh-ink:#07152A; --lh-glass:rgba(255,255,255,.12); --lh-line:rgba(255,255,255,.22);
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  min-height:100vh; min-height:100svh; max-height:none; margin:0; padding:0;
  background:#061224; color:#fff; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.lh *{box-sizing:border-box;}
.lh__media{position:absolute; inset:0; z-index:-1; overflow:hidden;}
.lh .lh__video{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block;
  transform:scale(1.06); animation:lh-drift 32s ease-in-out infinite alternate; clip-path:none; border-radius:0;}
@keyframes lh-drift{from{transform:scale(1.06) translate3d(0,0,0);} to{transform:scale(1.12) translate3d(-1.5%,-1%,0);}}
.lh__shade{position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(5,15,32,.90) 0%, rgba(5,15,32,.70) 34%, rgba(5,15,32,.25) 64%, rgba(5,15,32,.10) 100%),
  linear-gradient(0deg, rgba(5,15,32,.75) 0%, rgba(5,15,32,0) 38%),
  radial-gradient(120% 90% at 85% 10%, rgba(201,168,76,.18) 0%, rgba(201,168,76,0) 55%);}

.lh__inner{width:100%; max-width:1240px; margin:0 auto; padding:calc(64px + 52px) 28px 56px; /* 64px = barra de navegacao fixa */
  display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:56px; align-items:end;}
.lh__copy{min-width:0;}

/* ── Texto ─────────────────────────────────────────────────────────────── */
.lh__kicker{display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; padding:7px 14px 7px 12px; border-radius:999px;
  background:var(--lh-glass); border:1px solid var(--lh-line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9);
  animation:lh-up .7s cubic-bezier(.22,1,.36,1) both;}
.lh__live{position:relative; display:inline-block; width:8px; height:8px; border-radius:50%; background:#34d399; flex:0 0 8px;}
.lh__live::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(52,211,153,.55); animation:lh-ping 2s cubic-bezier(0,0,.2,1) infinite;}
@keyframes lh-ping{0%{transform:scale(.6); opacity:1;} 80%,100%{transform:scale(1.6); opacity:0;}}

.lh__title{margin:0; font-family:'Montserrat','Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(2.2rem, 4.7vw, 4.25rem); color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.35);}
.lh__line{display:block; animation:lh-up-t .9s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(.12s + var(--d) * .12s);}
.lh__title em{font-family:'Bodoni Moda',Georgia,serif; font-style:italic; font-weight:600; letter-spacing:-.01em; padding-right:.08em;
  background:linear-gradient(100deg,#f3d98f 0%,#c9a84c 45%,#f6e3a6 70%,#c9a84c 100%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:lh-sheen 6s ease-in-out 1.2s infinite;}
@keyframes lh-sheen{0%,100%{background-position:0% 0;} 50%{background-position:100% 0;}}
.lh__sub{margin:22px 0 0; max-width:50ch; font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.6; color:rgba(255,255,255,.84);
  animation:lh-up .9s cubic-bezier(.22,1,.36,1) .42s both;}
.lh__sub strong{color:#fff; font-weight:600;}
@keyframes lh-up-t{from{transform:translate3d(0,22px,0);} to{transform:none;}}
@keyframes lh-up{from{opacity:0; transform:translate3d(0,22px,0);} to{opacity:1; transform:none;}}

/* Pesquisa */
.lh__search{display:flex; align-items:center; gap:10px; margin:30px 0 0; max-width:580px; height:62px; padding:0 7px 0 20px; border-radius:999px;
  background:rgba(255,255,255,.97); box-shadow:0 20px 50px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4);
  animation:lh-up .9s cubic-bezier(.22,1,.36,1) .55s both; transition:box-shadow .2s ease;}
.lh__search:focus-within{box-shadow:0 20px 50px -18px rgba(0,0,0,.55), 0 0 0 4px rgba(232,201,122,.55);}
.lh__search svg{width:20px; height:20px; flex:0 0 20px; stroke:#56657a; fill:none; stroke-width:2.2; stroke-linecap:round;}
.lh__search input{flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:inherit; font-size:1.02rem; color:var(--lh-ink); -webkit-appearance:none; appearance:none;}
.lh__search input::placeholder{color:#7b8797;}
.lh__search button{flex:0 0 auto; height:48px; min-height:0; padding:0 24px; border:0; border-radius:999px; cursor:pointer; font:inherit; font-weight:700; font-size:.95rem;
  color:var(--lh-ink); background:linear-gradient(135deg,var(--lh-gold) 0%,var(--lh-gold-l) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s ease, filter .2s ease;}
.lh__search button:hover{transform:translateY(-1px); filter:brightness(1.05);}

/* Atalhos de intencao */
.lh__intents{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0 0; max-width:640px; animation:lh-up .9s cubic-bezier(.22,1,.36,1) .68s both;} /* Lote H: 6 atalhos em grelha 3x2 (antes 3+2 desalinhado) */
.lh__intents a{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:0; padding:9px 15px 9px 12px; border-radius:999px; text-decoration:none; white-space:nowrap;
  color:#fff; font-size:.86rem; font-weight:500; background:var(--lh-glass); border:1px solid var(--lh-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .2s ease, transform .2s ease, border-color .2s ease;}
.lh__intents a:hover{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.4); transform:translateY(-1px);}
.lh__intents svg{width:16px; height:16px; stroke:var(--lh-gold-l); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.lh__trust{display:flex; flex-wrap:wrap; gap:6px 20px; margin:22px 0 0; padding:0; list-style:none; font-size:.8rem; color:rgba(255,255,255,.7);
  animation:lh-up .9s cubic-bezier(.22,1,.36,1) .8s both;}
.lh__trust li{display:inline-flex; align-items:center; gap:7px;}
.lh__trust li::before{content:''; width:14px; height:14px; border-radius:50%; flex:0 0 14px;
  background:rgba(232,201,122,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c97a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;}

/* ── Cartao "Hoje na costa" ────────────────────────────────────────────── */
.lh__card{align-self:end; padding:18px; border-radius:22px; color:#fff;
  background:linear-gradient(160deg, rgba(10,28,54,.72) 0%, rgba(6,18,36,.62) 100%); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);}
.lh__card[hidden]{display:none;}
.lh__card{animation:lh-card .8s cubic-bezier(.22,1,.36,1) .5s both;}
@keyframes lh-card{from{opacity:0; transform:translate3d(0,26px,0) scale(.98);} to{opacity:1; transform:none;}}
.lh__card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85);}
.lh__card-h > span:first-child{display:inline-flex; align-items:center; gap:10px;}
.lh__time{font-weight:500; letter-spacing:.04em; text-transform:none; color:rgba(255,255,255,.55);}

.lh__best{display:grid; grid-template-columns:92px minmax(0,1fr); gap:14px; padding:12px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);}
.lh__thumb{position:relative; width:92px; height:92px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#10304F,#0B1B2B);}
.lh__thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.lh__eyebrow{margin:0 0 3px; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#34d399;}
.lh__name{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-weight:700; font-size:1.2rem; line-height:1.15; color:#fff;}
.lh__name a{color:inherit; text-decoration:none;}
.lh__name a:hover{text-decoration:underline; text-underline-offset:3px;}
.lh__meta{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0;}
.lh__meta span{padding:3px 8px; border-radius:7px; background:rgba(255,255,255,.1); font-size:.74rem; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums;}
.lh__acts{grid-column:1 / -1; display:grid; grid-template-columns:1.35fr 1fr; gap:8px; margin-top:2px;}
.lh__acts a{display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:0 12px; border-radius:11px; font-size:.86rem; font-weight:600; text-decoration:none; white-space:nowrap;}
.lh__acts .lh__hotels{color:var(--lh-ink); background:linear-gradient(135deg,var(--lh-gold) 0%,var(--lh-gold-l) 100%); box-shadow:0 10px 22px -12px rgba(201,168,76,.95);}
.lh__acts .lh__view{color:#fff; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.04);}
.lh__acts a:hover{filter:brightness(1.06);}
.lh__acts svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

.lh__rows{list-style:none; margin:12px 0 0; padding:0;}
.lh__rows li{border-top:1px solid rgba(255,255,255,.09);}
.lh__rows a{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px; padding:11px 4px; color:#fff; text-decoration:none; border-radius:10px; transition:background .15s ease;}
.lh__rows a:hover{background:rgba(255,255,255,.06);}
.lh__rows small{grid-column:1 / -1; font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.lh__rows b{font-weight:600; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lh__rows em{font-style:normal; font-weight:700; font-size:.95rem; color:var(--lh-gold-l); font-variant-numeric:tabular-nums;}
.lh__src{margin:10px 2px 0; font-size:.66rem; color:rgba(255,255,255,.42);}

/* esqueleto enquanto carrega */
.lh__card.is-loading .lh__best, .lh__card.is-loading .lh__rows li{position:relative; overflow:hidden; min-height:46px;}
.lh__card.is-loading .lh__best{min-height:174px;}
.lh__card.is-loading .lh__rows li{min-height:65px;}
.lh__card.is-loading .lh__best::after, .lh__card.is-loading .lh__rows li::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%); animation:lh-shimmer 1.4s infinite;}
@keyframes lh-shimmer{from{transform:translateX(-100%);} to{transform:translateX(100%);}}

/* ── Telemovel / tablet ────────────────────────────────────────────────── */
@media (max-width:980px){
  .lh{align-items:flex-start; min-height:0;}
  .lh__inner{grid-template-columns:minmax(0,1fr); gap:28px; padding:calc(64px + 36px) 20px 34px;}
  .lh__card{max-width:520px;}
}
@media (max-width:640px){
  .lh__shade{background:
    linear-gradient(180deg, rgba(5,15,32,.55) 0%, rgba(5,15,32,.70) 45%, rgba(5,15,32,.94) 78%, #061224 100%);}
  .lh__inner{padding:calc(60px + 26px) 18px 28px;}
  .lh__kicker{font-size:.62rem; letter-spacing:.08em; margin-bottom:16px; border-radius:14px; line-height:1.4;}
  .lh__title{font-size:2.05rem; line-height:1.08;}
  .lh__line{display:inline;}
  .lh__sub{font-size:.98rem; margin-top:14px;}
  .lh__search{height:56px; margin-top:22px; padding-left:16px;}
  .lh__search button{height:44px; padding:0 18px;}
  .lh__intents{display:flex; flex-wrap:nowrap; overflow-x:auto; margin:14px -18px 0; padding:2px 18px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .lh__intents::-webkit-scrollbar{display:none;}
  .lh__trust{gap:6px 14px; font-size:.74rem; margin-top:16px;}
  .lh__best{grid-template-columns:80px minmax(0,1fr);}
  .lh__thumb{width:80px; height:80px;}
}
@media (prefers-reduced-motion:reduce){
  .lh .lh__video{animation:none; transform:none;}
  .lh__kicker, .lh__line, .lh__sub, .lh__search, .lh__intents, .lh__trust, .lh__card{animation:none;}
  .lh__title em{animation:none;}
  .lh__live::after{animation:none;}
}

/* style.css: no telemovel <main> e <section> levam padding 0 16px -> o hero ocupa a largura toda */
@media (max-width:768px){ body main > section.lh{margin:0 -16px !important; padding:0 !important; width:calc(100% + 32px) !important; max-width:none !important;} } /* style.css: main{padding:0 16px} + *{max-width:100%} com !important */