/* /en/best-beaches-portugal — guia editorial "Best Beaches in Portugal" — Portal Turismo Portugal — 2026-10-11
 * Carrega depois de css/praia-v2.css (reutiliza o hero .pv2-hero, botoes .pv2-btn, chips e .mobile-bottom-nav).
 * ATENCAO style.css ate 768px: nenhuma classe aqui contem "-grid" nem "-card"; as seccoes filhas de main.pv2
 * repoem o padding com !important (style.css forca section{padding:0 16px !important}).
 */
.bb{--card:#0B1B2B; --card2:#0D2540;}
.bb-wrap{max-width:1120px; margin:0 auto;}
.bb .bb-intro{margin:0 0 26px; max-width:68ch; font-size:1.02rem; line-height:1.7; color:rgba(255,255,255,.68);}
.bb p a, .bb li a{color:var(--gold-l); text-decoration:underline; text-decoration-color:rgba(232,201,122,.45); text-underline-offset:3px;}
.bb p a:hover, .bb li a:hover{color:#fff;}
.bb h3{font-family:'Bodoni Moda',Georgia,serif; font-weight:600; color:#fff;}

/* Hero (por cima do .pv2-hero) */
.bb-hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem); line-height:1.02;}
.bb-hero h1 .bb-h1-y{font-weight:400; color:rgba(255,255,255,.55);}
.bb-hero h1 em{display:block; margin-top:12px; font-style:italic; font-weight:400; font-size:.56em; line-height:1.15; color:var(--gold-l); letter-spacing:-.005em;}
.bb-hero .pv2-hero__ph{aspect-ratio:5/4;}
.bb-vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.bb-hero .pv2-lead{max-width:52ch;}

/* Seccoes */
main.pv2 > .bb-quick, main.pv2 > .bb-when, main.pv2 > .bb-go, main.pv2 > .bb-data, main.pv2 > .bb-faq, main.pv2 > .bb-rel{padding-top:clamp(48px,7vw,96px) !important;}
main.pv2 > .bb-picks{padding-top:clamp(40px,6vw,80px) !important;}

/* Resposta rapida */
.bb-tablewrap{border-radius:20px; border:1px solid var(--line); background:linear-gradient(160deg,var(--card) 0%,var(--card2) 100%); overflow:hidden;}
.bb-table{width:100%; border-collapse:collapse; margin:0; font-size:.95rem;}
.bb-table th, .bb-table td{padding:14px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); background:none; color:rgba(255,255,255,.86);}
.bb-table thead th{font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); padding-top:16px; padding-bottom:12px;}
.bb-table tbody th{font-weight:600; color:#fff; width:34%;}
.bb-table tbody tr:last-child th, .bb-table tbody tr:last-child td{border-bottom:0;}
.bb-table td:last-child{color:var(--mut); font-size:.86rem; white-space:nowrap;}
.bb-table a{color:var(--gold-l); text-decoration:none; font-weight:600;}
.bb-table a:hover{color:#fff; text-decoration:underline;}
.bb-how{margin-top:22px; padding:22px 24px; border-radius:20px; border:1px solid rgba(232,201,122,.25); background:rgba(201,168,76,.06);}
.bb-how h3{margin:0 0 10px; font-size:1.25rem;}
.bb-how ul{margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:8px;}
.bb-how li{font-size:.92rem; line-height:1.65; color:rgba(255,255,255,.78);}
.bb-how li::marker{color:var(--gold-l);}
.bb-how strong{color:#fff;}

/* Indice */
.bb-toc{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px !important;}
.bb-toc a{display:inline-flex; align-items:center; min-height:40px; padding:8px 15px; border-radius:999px; font-size:.84rem; font-weight:500; color:#fff; text-decoration:none; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); transition:border-color .2s, background .2s;}
.bb-toc a:hover{border-color:var(--gold-l); background:rgba(255,255,255,.09);}

/* Categorias e praias */
.bb-cat{padding-top:clamp(44px,6vw,80px); scroll-margin-top:80px;}
.bb-cat h2{margin-bottom:10px;}
.bb-pick{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(20px,3.5vw,44px); align-items:start; padding:28px 0; border-top:1px solid var(--line); scroll-margin-top:80px;}
.bb-pick__ph{position:relative; margin:0; aspect-ratio:3/2; border-radius:4px 40px 4px 40px; overflow:hidden; background:linear-gradient(150deg,#0B1B2B,#10304F); box-shadow:0 30px 60px -34px rgba(0,0,0,.85);}
.bb-pick__ph > a{display:block; width:100%; height:100%;}
.bb-pick__ph img{display:block; width:100%; height:100% !important; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1);}
.bb-pick:hover .bb-pick__ph img{transform:scale(1.03);}
.bb-num{position:absolute; left:12px; top:12px; padding:4px 10px; border-radius:999px; font-family:'Fraunces',Georgia,serif; font-size:.85rem; font-weight:600; color:#07152A; background:var(--gold-l); font-variant-numeric:tabular-nums;}
.bb-credit{position:absolute; z-index:2; right:12px; bottom:8px; margin:0; font-size:9px; line-height:1.2; color:#fff; opacity:.28; max-width:calc(100% - 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .2s;}
.bb-credit:hover, .bb-credit:focus-within{opacity:.75;}
.bb-credit a{color:#fff !important; text-decoration:none !important;}
.bb-pick__tx{min-width:0;}
.bb-place{margin:2px 0 6px; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-l);}
.bb-pick h3{margin:0 0 10px; font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.12;}
.bb-pick h3 a{color:#fff; text-decoration:none;}
.bb-pick h3 a:hover{color:var(--gold-l);}
.bb-text{margin:0 0 16px; font-size:1rem; line-height:1.75; color:rgba(255,255,255,.84); max-width:66ch;}
.bb-facts{display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 16px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.bb-facts div{min-width:0;}
.bb-facts dt{font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mut);}
.bb-facts dd{margin:3px 0 0; font-size:.9rem; font-weight:600; color:#fff; display:flex; align-items:center; gap:7px;}
.bb-dot{width:8px; height:8px; border-radius:50%; background:#4ade80; flex:0 0 8px;}
.bb-dot--warn{background:#fbbf24;} .bb-dot--bad{background:#f87171;}
.bb-live{display:inline-flex; align-items:center; gap:7px; color:#fff !important; text-decoration:none !important;}
.bb-live i{width:8px; height:8px; border-radius:50%; background:#ff4d6d; animation:pv2-pulse 2s infinite;}
.bb-live:hover{color:var(--gold-l) !important;}
.bb-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;}
.bb-more{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.92rem; font-weight:600; color:var(--gold-l) !important; text-decoration:none;}
.bb-more svg, .bb-hotel svg, .bb-carlink svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 17px;}
.bb-more:hover{color:#fff !important;}
.bb-hotel{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 16px; border-radius:999px; font-size:.86rem; font-weight:600; color:#fff !important; text-decoration:none; background:rgba(255,255,255,.06); border:1px solid rgba(232,201,122,.45); transition:background .2s, border-color .2s;}
.bb-hotel:hover{background:rgba(232,201,122,.12); border-color:var(--gold-l);}

/* GetYourGuide */
.bb-gyg{margin:12px 0 0; padding:clamp(20px,3vw,32px); border-radius:24px; border:1px solid var(--line); background:radial-gradient(120% 140% at 100% 0%,rgba(201,168,76,.12) 0%,rgba(201,168,76,0) 50%),linear-gradient(160deg,#0B1B2B 0%,#0D2540 100%);}
.bb-gyg__k{margin:0 0 8px; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-l);}
.bb-gyg h3{margin:0 0 10px; font-size:clamp(1.35rem,2.2vw,1.7rem);}
.bb-gyg__head p:last-child{margin:0 0 18px; max-width:70ch; font-size:.9rem; line-height:1.65; color:rgba(255,255,255,.7);}
.bb-gyg__frame{padding:16px 14px 10px; border-radius:16px; background:#fff;}
.bb-gyg__frame [data-gyg-widget]{display:block; min-height:360px;}
.bb-gyg__all{display:inline-block; margin:0 0 10px 6px; font-size:.86rem; font-weight:600; color:#0a3d6b !important; text-decoration:underline; text-underline-offset:3px;}
.bb-gyg__frame [data-gyg-widget] a{color:#0a3d6b;}

/* Quando ir */
.bb-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.bb-col{padding:22px; border-radius:20px; background:linear-gradient(160deg,var(--card) 0%,var(--card2) 100%); border:1px solid var(--line);}
.bb-col h3{margin:0 0 8px; font-size:1.25rem;}
.bb-col p{margin:0; font-size:.93rem; line-height:1.7; color:rgba(255,255,255,.78);}
.bb-note2{margin-top:18px; display:flex; flex-direction:column; gap:10px; max-width:80ch;}
.bb-note2 p{margin:0; font-size:.93rem; line-height:1.7; color:rgba(255,255,255,.74);}
.bb-note2 strong{color:#fff;}

/* Como chegar */
.bb-airs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start;}
.bb-air{padding:20px 20px 18px; border-radius:20px; background:linear-gradient(160deg,var(--card) 0%,var(--card2) 100%); border:1px solid var(--line);}
.bb-air h3{margin:0 0 10px; font-size:1.15rem;}
.bb-air ul{list-style:none; margin:0 0 14px; padding:0;}
.bb-air li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.86rem; color:rgba(255,255,255,.8);}
.bb-air li:last-child{border-bottom:0;}
.bb-air li b{font-weight:600; color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums;}
.bb-carlink{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 15px; border-radius:999px; font-size:.84rem; font-weight:600; color:#07152A !important; text-decoration:none; background:linear-gradient(135deg,var(--gold) 0%,var(--gold-l) 100%);}
.bb-carlink:hover{filter:brightness(1.06);}
.bb-tips{margin:24px 0 0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:10px; max-width:84ch;}
.bb-tips li{font-size:.93rem; line-height:1.7; color:rgba(255,255,255,.78);}
.bb-tips li::marker{color:var(--gold-l);}
.bb-tips strong{color:#fff;}

/* Dados */
.bb-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.bb-stats a{display:block; padding:22px; border-radius:20px; text-decoration:none; background:linear-gradient(160deg,var(--card) 0%,var(--card2) 100%); border:1px solid var(--line); transition:border-color .2s, transform .2s;}
.bb-stats a:hover{border-color:rgba(232,201,122,.5); transform:translateY(-2px);}
.bb-stats b{display:block; font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:clamp(2rem,3.4vw,2.6rem); line-height:1; color:var(--gold-l);}
.bb-stats span{display:block; margin-top:10px; font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.78);}
.bb .bb-small{margin:14px 0 0; font-size:.76rem; color:rgba(255,255,255,.45);}

/* FAQ */
.bb-q{border-bottom:1px solid var(--line); max-width:860px;}
.bb-q summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:56px; padding:16px 0; font-size:1.05rem; font-weight:600; color:#fff;}
.bb-q summary::-webkit-details-marker{display:none;}
.bb-q summary::after{content:'+'; flex:0 0 auto; font-family:'Fraunces',Georgia,serif; font-size:1.5rem; font-weight:300; line-height:1; color:var(--gold-l); transition:transform .2s;}
.bb-q[open] summary::after{transform:rotate(45deg);}
.bb-q summary:focus-visible{outline:2px solid var(--gold-l); outline-offset:3px;}
.bb-q p{margin:0 0 18px; font-size:.97rem; line-height:1.75; color:rgba(255,255,255,.8); max-width:76ch;}

/* Guias relacionados */
.bb-links{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0;}
.bb-links a{display:inline-flex; align-items:center; min-height:44px; padding:9px 16px; border-radius:999px; font-size:.88rem; color:#fff !important; text-decoration:none !important; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);}
.bb-links a:hover{border-color:var(--gold-l);}

@media (max-width:1024px){
  .bb-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .bb-pick{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);}
  .bb-cols{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .bb-hero h1{font-size:clamp(2.1rem,9.6vw,2.8rem);}
  .bb-hero h1 em{font-size:.6em;}
  .bb-hero .pv2-hero__ph{aspect-ratio:auto;}
  .bb-hero .pv2-hero__ph::after{background:linear-gradient(180deg,rgba(7,21,42,.72) 0%,rgba(7,21,42,.5) 30%,rgba(7,21,42,.62) 50%,rgba(7,21,42,.9) 72%,#07152A 100%);}
  .bb-hero .pv2-kicker{letter-spacing:.14em;}
  .bb-pick{grid-template-columns:1fr; gap:16px; padding:24px 0;}
  .bb-pick__ph{border-radius:4px 32px 4px 32px;}
  .bb-table thead{display:none;}
  .bb-table, .bb-table tbody, .bb-table tr, .bb-table th, .bb-table td{display:block; width:auto;}
  .bb-table tr{padding:12px 16px; border-bottom:1px solid var(--line);}
  .bb-table tbody tr:last-child{border-bottom:0;}
  .bb-table th, .bb-table td{padding:0; border:0;}
  .bb-table tbody th{width:auto; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mut);}
  .bb-table td{margin-top:4px; font-size:1rem;}
  .bb-table td:last-child{margin-top:2px; font-size:.8rem; white-space:normal;}
  .bb-how{padding:18px;}
  .bb-airs{grid-template-columns:1fr;}
  .bb-stats{gap:10px;}
  .bb-stats a{padding:16px;}
  .bb-acts .bb-hotel{flex:1 1 auto; justify-content:center;}
  .bb-gyg{padding:18px 16px; border-radius:20px;}
  .bb-gyg__frame{padding:12px 8px 8px; margin:0 -4px;}
}
@media (max-width:380px){ .bb-stats{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ .bb-pick__ph img, .bb-stats a{transition:none;} .bb-live i{animation:none;} }