/* Página Melhores hotéis no Guarujá: seções exclusivas (guia por região e comparativo) */

/* Fundo branco em toda a página; seções separadas por linha fina */
.guide,.compare,.faq{background:#fff;border-top:1px solid var(--line)}

/* Guia: onde ficar (regiões e praias, com fotos) */
.gd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gd-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gd-media{position:relative;margin:0;aspect-ratio:16/9;background:var(--foam);overflow:hidden}
.gd-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gd-card:hover > .gd-media img,.gd-top:hover .gd-media img,.gd-areas li:hover .gd-media img{transform:scale(1.04)}
.gd-card > .gd-media{aspect-ratio:2/1}
.credit{position:absolute;right:8px;bottom:8px;max-width:calc(100% - 16px);background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:3px 7px;font-size:10.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credit a{color:#fff}
.gd-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px 26px;flex:1}
.gd-card h3{font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ocean)}
.gd-card h3 em{display:block;margin-top:.35em;font-family:var(--sans);font-style:normal;font-weight:300;font-size:clamp(1rem,1.4vw,1.1rem);letter-spacing:0;color:var(--ink-2)}
.gd-body > p{margin:0;font-size:15px;color:var(--ink-2);max-width:68ch}
.gd-body .answer{margin:0}
.gd-meta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--sea)}
.gd-meta i{font-size:18px}
.gd-btn{margin-top:auto;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(4,82,121,.25);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;color:var(--ocean);text-decoration:none;transition:border-color .25s,background .25s}
.gd-btn:hover{border-color:var(--sea);background:var(--sand-2)}
.gd-btn i{font-size:15px}

/* Card principal (Guarujá): foto grande ao lado do texto + praias com foto */
.gd-card.is-main{grid-column:1 / -1}
.gd-top{display:grid;grid-template-columns:1.05fr 1fr}
.gd-top .gd-media{aspect-ratio:auto;min-height:360px}
.gd-areas{list-style:none;margin:0;padding:0 24px 24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.gd-areas li{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.gd-areas .gd-media{aspect-ratio:3/2}
.gd-areas .credit{font-size:9.5px}
.gd-area-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 16px;flex:1}
.gd-areas h4{margin:0;font-family:var(--serif);font-size:1rem;line-height:1.3;color:var(--ink)}
.gd-areas p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.gd-areas a.link-u{margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--sea)}
@media (max-width:1100px){.gd-areas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.gd-top{grid-template-columns:1fr}.gd-top .gd-media{min-height:0;aspect-ratio:16/9}}
@media (max-width:760px){.gd-grid{grid-template-columns:1fr}.gd-areas{grid-template-columns:1fr 1fr;padding:0 16px 16px}.gd-body{padding:18px}}
@media (max-width:480px){.gd-areas{grid-template-columns:1fr}}