/* /guias/melhores-praias-portugal — "As melhores praias de Portugal" (PT) — Portal Turismo Portugal — 2026-10-11
 * Carrega depois de css/praia-v2.css e css/best-beaches-en.css (reutiliza .bb-pick, .bb-facts, .bb-gyg, FAQ, etc.).
 * Proprio desta pagina: hero em mosaico (.mp-hero), resposta rapida em paineis (.mp-qa), barra de tipos fixa (.mp-rail),
 * praias em ziguezague, selo Bandeira Azul na foto e mapas por regiao (.mp-regs).
 * ATENCAO style.css ate 768px: nenhuma classe aqui contem "-grid" nem "-card"; seccoes de main.pv2 com padding !important.
 * O elemento LCP (foto da Marinha / h1) nunca anima a opacidade.
 */
/* barra .mp-rail fixa: style.css poe overflow-x:hidden em html e body (cria contentor de scroll e anula o sticky); clip corta igual sem o criar */
html:has(body.mp-page), body.mp-page{overflow-x:clip !important; overflow-y:visible !important;}
main.pv2.mp{overflow:clip !important;}

/* ── Hero em mosaico ─────────────────────────────────────────────────── */
main.pv2 > .mp-hero{position:relative; isolation:isolate; padding-top:clamp(104px,14vh,150px) !important; padding-bottom:clamp(44px,7vw,88px) !important;
  background:
    radial-gradient(60% 80% at 82% 18%,rgba(232,201,122,.20) 0%,rgba(232,201,122,0) 60%),
    radial-gradient(70% 90% at 0% 100%,rgba(41,128,212,.22) 0%,rgba(41,128,212,0) 60%),
    linear-gradient(165deg,#061226 0%,#07152A 45%,#0C2440 100%);}
main.pv2 > .mp-hero::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23e8c97a' stroke-width='1' opacity='.16'%3E%3Cpath d='M0 420 C240 380 480 470 720 420 S1200 370 1440 420'/%3E%3Cpath d='M0 460 C240 420 480 510 720 460 S1200 410 1440 460'/%3E%3Cpath d='M0 500 C240 460 480 550 720 500 S1200 450 1440 500'/%3E%3Cpath d='M0 540 C240 500 480 590 720 540 S1200 490 1440 540'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat;}
.mp-hero__in{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,80px); align-items:center;}
.mp-hero__text{min-width:0;}
.mp-hero h1{margin:0 0 18px; font-family:'Bodoni Moda',Georgia,serif; font-weight:600; color:#fff; font-size:clamp(2.4rem,4.8vw,4rem); line-height:1.02; letter-spacing:-.02em;}
.mp-hero h1 .mp-h1-y{font-weight:400; color:rgba(255,255,255,.5);}
.mp-hero h1 em{display:block; margin-top:14px; font-style:italic; font-weight:400; font-size:.52em; line-height:1.2; letter-spacing:0;
  background:linear-gradient(90deg,#e8c97a 0%,#f5e3b0 45%,#c9a84c 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.mp-lead{margin:0 0 22px; max-width:54ch; font-size:1.02rem; line-height:1.7; color:rgba(255,255,255,.74);}

.mp-mosaic{position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; height:clamp(440px,60vh,580px); margin:0 0 24px 0;}
.mp-mosaic::before{content:''; position:absolute; inset:-14px -14px 14px 14px; z-index:-1; border:1px solid rgba(232,201,122,.38); border-radius:4px 56px 4px 56px; pointer-events:none;}
.mp-tile{position:relative; display:block; min-height:0; overflow:hidden; border-radius:4px 44px 4px 44px; background:#0F2235; box-shadow:0 34px 70px -34px rgba(0,0,0,.9); text-decoration:none;}
.mp-tile--a{grid-row:1 / span 2;}
.mp-tile--b{border-radius:44px 4px 44px 4px; animation:mp-up .9s .1s cubic-bezier(.22,1,.36,1) both;}
.mp-tile--c{animation:mp-up .9s .22s cubic-bezier(.22,1,.36,1) both;}
.mp-tile img{display:block; width:100%; height:100% !important; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,1,.36,1);}
.mp-tile--a img{object-position:50% 60%;}
.mp-tile:hover img{transform:scale(1.05);}
.mp-tile::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(7,21,42,.7) 0%,rgba(7,21,42,0) 42%);}
.mp-tile__l{position:absolute; z-index:1; left:14px; bottom:12px; right:14px; font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6);}
.mp-tile--a .mp-tile__l{left:auto; text-align:right;}
.mp-count{position:absolute; z-index:2; left:-26px; bottom:34px; display:flex; align-items:center; gap:10px; padding:12px 18px 12px 16px; border-radius:18px;
  background:rgba(7,21,42,.82); border:1px solid rgba(232,201,122,.45); box-shadow:0 20px 40px -18px rgba(0,0,0,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.mp-count b{font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:3.4rem; line-height:.9; background:linear-gradient(135deg,#f5e3b0 0%,#c9a84c 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.mp-count span{font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:rgba(255,255,255,.75);}
.mp-credit{position:absolute; right:0; bottom:-20px; margin:0; font-size:9px; line-height:1.2; color:#fff; opacity:.28; white-space:nowrap; transition:opacity .2s;}
.mp-credit:hover,.mp-credit:focus-within{opacity:.75;}
.mp-credit a{color:#fff !important; text-decoration:none !important;}
@keyframes mp-up{from{transform:translateY(22px);} to{transform:none;}}

.mp .pv2-chips a{color:#fff !important; text-decoration:none !important;}

/* ── Resposta rapida em paineis ──────────────────────────────────────── */
.mp-qa{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.mp-qa li{position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; padding:18px 18px 16px; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(160deg,#0B1B2B 0%,#0D2540 100%); transition:border-color .2s, transform .2s;}
.mp-qa li:hover{border-color:rgba(232,201,122,.45); transform:translateY(-2px);}
.mp-qa__ic{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:10px; background:rgba(232,201,122,.1); margin-bottom:4px;}
.mp-qa__ic svg{width:18px; height:18px; fill:none; stroke:var(--gold-l); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.mp-qa__w{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mut);}
.mp-qa__a{font-family:'Bodoni Moda',Georgia,serif; font-size:1.25rem; font-weight:600; line-height:1.25; color:#fff;}
.mp-qa__a a{color:#fff !important; text-decoration:none !important; background-image:linear-gradient(var(--gold-l),var(--gold-l)); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s, color .2s;}
.mp-qa__a a:hover{color:var(--gold-l) !important; background-size:100% 1px;}
.mp-qa__r{font-size:.8rem; color:rgba(255,255,255,.5);}

/* ── Barra de tipos (fixa ao fazer scroll) ───────────────────────────── */
main.pv2 > .bb-picks{padding-top:clamp(36px,5vw,64px) !important;}
.mp-rail{position:sticky; top:64px; max-width:none !important; z-index:20; margin:0 calc(-1 * clamp(16px,5vw,64px)); padding:10px clamp(16px,5vw,64px);
  background:rgba(7,21,42,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.mp-rail__in{max-width:1120px; margin:0 auto; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.mp-rail__in::-webkit-scrollbar{display:none;}
.mp-rail a{flex:0 0 auto; display:inline-flex; align-items:center; min-height:38px; padding:7px 15px; border-radius:999px; font-size:.82rem; font-weight:500; color:#fff; text-decoration:none; white-space:nowrap;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); transition:border-color .2s, background .2s;}
.mp-rail a:hover{border-color:var(--gold-l); background:rgba(232,201,122,.1);}
.mp-rail a.is-on{color:#07152A; font-weight:600; border-color:transparent; background:linear-gradient(135deg,var(--gold) 0%,var(--gold-l) 100%);}
.mp .bb-cat{scroll-margin-top:130px;}
.mp .bb-pick{scroll-margin-top:130px;}

/* ── Praias: ziguezague e selo Bandeira Azul ─────────────────────────── */
@media (min-width:901px){
  .mp .bb-pick:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,420px);}
  .mp .bb-pick:nth-of-type(even) .bb-pick__ph{order:2; border-radius:40px 4px 40px 4px;}
}
.mp-ba{position:absolute; z-index:2; right:12px; top:12px; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px;
  font-size:.68rem; font-weight:600; letter-spacing:.02em; color:#fff; background:rgba(29,78,216,.88); border:1px solid rgba(147,197,253,.55);}
.mp-ba::before{content:''; width:8px; height:8px; border-radius:2px; background:#93c5fd;}
.mp .mp-catmore{margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:.92rem; color:rgba(255,255,255,.7);}

/* ── Mapas por regiao ────────────────────────────────────────────────── */
main.pv2 > .mp-maps{padding-top:clamp(48px,7vw,96px) !important;}
.mp-regs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.mp .mp-regs a{text-decoration:none !important; color:#fff !important;}
.mp-regs a{position:relative; display:flex; flex-direction:column; gap:6px; min-height:112px; padding:18px; border-radius:18px; text-decoration:none; overflow:hidden;
  border:1px solid var(--line); background:radial-gradient(120% 120% at 100% 0%,rgba(41,128,212,.18) 0%,rgba(41,128,212,0) 55%),linear-gradient(160deg,#0B1B2B 0%,#0D2540 100%); transition:border-color .2s, transform .2s;}
.mp-regs a:hover{border-color:rgba(232,201,122,.5); transform:translateY(-2px);}
.mp-regs b{font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:2.3rem; line-height:1; color:var(--gold-l); font-variant-numeric:tabular-nums;}
.mp-regs span{font-size:.92rem; font-weight:600; color:#fff;}
.mp-regs svg{position:absolute; right:14px; top:16px; width:20px; height:20px; fill:none; stroke:rgba(232,201,122,.6); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

@media (max-width:1024px){
  .mp-qa{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mp-regs{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .mp-hero__in{grid-template-columns:1fr;}
  .mp-mosaic{height:clamp(300px,82vw,420px); gap:10px; margin:6px 10px 22px 0;}
  .mp-mosaic::before{inset:-10px -10px 10px 10px; border-radius:4px 40px 4px 40px;}
  .mp-tile{border-radius:4px 30px 4px 30px;}
  .mp-tile--b{border-radius:30px 4px 30px 4px;}
  .mp-count{left:10px; bottom:12px; padding:9px 13px 9px 12px; border-radius:14px;}
  .mp-count b{font-size:2.5rem;}
  .mp-tile--a .mp-tile__l{display:none;}
}
@media (max-width:768px){
  main.pv2 > .mp-hero{padding-top:96px !important;}
  .mp-hero h1{font-size:clamp(2.1rem,9.4vw,2.8rem);}
  .mp-hero h1 em{font-size:.6em;}
  .mp-hero .pv2-kicker{letter-spacing:.14em;}
  .mp-qa{grid-template-columns:1fr; gap:10px;}
  .mp-qa li{display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; row-gap:2px; padding:14px;}
  .mp-qa__ic{grid-row:1 / span 3; margin:0;}
  .mp-qa__a{font-size:1.12rem;}
  .mp-rail{top:60px; padding-top:8px; padding-bottom:8px;}
  .mp-regs a{min-height:96px; padding:14px;}
  .mp-regs b{font-size:1.9rem;}
  .mp-credit{bottom:-18px;}
}
@media (prefers-reduced-motion:reduce){
  .mp-tile--b, .mp-tile--c{animation:none;}
  .mp-tile img, .mp-qa li, .mp-regs a{transition:none;}
}