/* ============================================================
   HERO da home (#feat) — full-bleed, scrim e conteudo sobreposto
   Carregado no header.php por ultimo, para vencer o #feat legado
   do style.min.css.

   Corrige a home antiga:
   1. A <figure> tinha opacity:.7 (resquicio do antigo background-image).
      Com opacity < 1 o Chrome nao pintava o <img> object-fit da imagem
      de LCP: o hero ficava so preto/cinza (parecia "imagem de baixa
      qualidade"). Aqui a figure volta a opacity:1.
   2. O antigo <h1> caia por cima da marca "QUINTA DO SOL" gravada na
      foto de praia = texto duplicado. A foto do hero agora e a piscina
      do hotel (sem marca), com um scrim suave so para legibilidade.
   ============================================================ */

:root{
    --qs-gold:   #f4a62c;
    --qs-gold-d: #e0921a;
    --qs-ink:    #12233a;
}

/* ---------- container ---------- */
#feat.block{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(480px, 82vh, 760px);
    max-height: none;
    margin-bottom: 56px;
    background: #0a2540;
    overflow: hidden;
    text-align: center;
}

/* ---------- imagem de fundo ---------- */
#feat > .qs-figimg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 1;                 /* mata o opacity:.7 legado que quebrava o render */
    z-index: 0;
}
#feat > .qs-figimg > .qs-cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    background: transparent;    /* sem o placeholder cinza do lazyload aqui */
}
/* desliga o gradiente-topo legado (#feat figure::before); usamos o scrim proprio */
#feat > .qs-figimg::before{ display: none; }

/* ---------- scrim ----------
   Suave: escurece topo (header), base (transicao) e um leve foco radial
   atras do texto, sem apagar a foto da piscina. */
#feat::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 72% 74% at 50% 48%, rgba(6,22,44,.50), rgba(6,22,44,0) 72%),
        linear-gradient(180deg,
            rgba(6,22,44,.52) 0%,
            rgba(6,22,44,.14) 26%,
            rgba(6,22,44,.14) 56%,
            rgba(6,22,44,.60) 100%);
    pointer-events: none;
}

/* ---------- bloco de conteudo ----------
   Largura maior que a do texto de apoio: o <h1> ("HOTEIS QUINTA DO SOL")
   precisa caber em uma linha no desktop, senao sobra "SOL" orfao embaixo. */
#feat figcaption{
    position: relative;
    z-index: 2;
    top: auto; left: auto;
    transform: none;
    width: min(960px, 94vw);
    padding: 0 20px;
    color: #fff;
}

.qs-hero__eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
}
.qs-hero__eyebrow::before,
.qs-hero__eyebrow::after{
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--qs-gold);
}

#feat figcaption h1{
    margin: 0 0 20px;
    font-weight: 900;
    /* min() com vw garante que o titulo encolhe antes de quebrar linha */
    font-size: clamp(30px, 4.7vw, 52px);
    line-height: 1.06;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 26px rgba(0,0,0,.55);
    /* se ainda assim quebrar (telas estreitas), reparte as linhas de forma
       equilibrada em vez de deixar uma palavra sozinha */
    text-wrap: balance;
    hyphens: none;
}
#feat figcaption > p{
    margin: 0 auto;
    max-width: 580px;
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.5;
    color: rgba(255,255,255,.95);
    text-shadow: 0 1px 14px rgba(0,0,0,.55);
}

/* ---------- CTAs ---------- */
.qs-hero__actions{
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.qs-hero__btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.qs-hero__btn--primary{
    background: var(--qs-gold);
    color: var(--qs-ink);
    box-shadow: 0 10px 28px rgba(244,166,44,.40);
}
.qs-hero__btn--primary:hover{
    background: var(--qs-gold-d);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(244,166,44,.52);
}
.qs-hero__btn--ghost{
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.7);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.qs-hero__btn--ghost:hover{
    background: rgba(255,255,255,.22);
    transform: translateY(-2px);
}

/* ---------- linha de confianca ---------- */
.qs-hero__trust{
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.94);
}
.qs-hero__trust span{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.qs-hero__trust i{ color: var(--qs-gold); font-size: 15px; }

/* ---------- indicador de scroll ---------- */
.qs-hero__scroll{
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    font-size: 20px;
    text-decoration: none;
    animation: qsHeroBounce 2s ease-in-out infinite;
}
.qs-hero__scroll:hover{ color: #fff; }
@keyframes qsHeroBounce{
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(9px); }
}

/* ancoras internas nao ficam escondidas sob o header fixo */
html{ scroll-behavior: smooth; }
#hoteis, #map{ scroll-margin-top: 84px; }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 970px){
    #feat.block{ height: clamp(440px, 76vh, 620px); margin-bottom: 40px; }
    .qs-hero__scroll{ display: none; }
}
@media (max-width: 680px){
    #feat.block{
        height: auto;
        min-height: 78vh;
        padding: 104px 0 56px;
    }
    #feat figcaption{ width: 96vw; }
    #feat figcaption h1{ font-size: clamp(25px, 7.4vw, 38px); margin-bottom: 16px; }
    .qs-hero__eyebrow{ font-size: 11px; letter-spacing: .18em; margin-bottom: 16px; }
    .qs-hero__eyebrow::before,
    .qs-hero__eyebrow::after{ width: 18px; }
    .qs-hero__actions{ margin-top: 26px; }
    .qs-hero__btn{ padding: 14px 26px; font-size: 14px; }
    .qs-hero__trust{ gap: 8px 18px; font-size: 12.5px; margin-top: 24px; }
}
@media (max-width: 380px){
    .qs-hero__actions{ flex-direction: column; align-items: stretch; }
    .qs-hero__btn{ justify-content: center; }
}
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .qs-hero__scroll{ animation: none; }
}