/* ============================================================
   Eco Pousada Ytororô — O Som das Águas
   Identidade: floresta profunda, água, madeira clara.
   Tipografia: Fraunces (display) + Outfit (texto).
   ============================================================ */

:root {
    --yt-floresta: #1d3b2a;
    --yt-floresta-escura: #12271b;
    --yt-agua: #3e8e7e;
    --yt-agua-clara: #9ed0c5;
    --yt-areia: #f4efe6;
    --yt-madeira: #a8794f;
    --yt-tinta: #26312b;
    --yt-nevoa: #6d7b72;
    --fonte-display: "Fraunces", serif;
    --fonte-texto: "Outfit", sans-serif;
    --raio: 1.25rem;
    --sombra: 0 18px 45px rgba(18, 39, 27, .12);
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--fonte-texto);
    color: var(--yt-tinta);
    background: var(--yt-areia);
    line-height: 1.65;
}
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }

/* ------- Tipografia ------- */
.yt-titulo {
    font-family: var(--fonte-display);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--yt-floresta);
    line-height: 1.12;
}
.yt-kicker {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--yt-agua);
    font-weight: 600;
    margin-bottom: .75rem;
}
.yt-kicker-claro { color: var(--yt-agua-clara); }
.yt-texto { color: var(--yt-nevoa); font-weight: 300; font-size: 1.02rem; }
.yt-link { color: var(--yt-agua); text-decoration: none; font-weight: 500; }
.yt-link:hover { color: var(--yt-floresta); }
.yt-prosa { font-size: 1.05rem; color: #3a463f; }
.yt-prosa h2, .yt-prosa h3 { font-family: var(--fonte-display); color: var(--yt-floresta); margin-top: 2rem; }

/* ------- Navbar ------- */
.yt-navbar {
    background: linear-gradient(180deg, rgba(18,39,27,.85), rgba(18,39,27,0));
    padding: 1rem 0;
    transition: background .3s, box-shadow .3s, padding .3s;
}
.yt-navbar.rolou { background: rgba(18,39,27,.96); box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: .55rem 0; }
.yt-navbar .nav-link { color: #eef4ef; font-weight: 400; font-size: .95rem; }
.yt-navbar .nav-link:hover { color: var(--yt-agua-clara); }
.yt-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.yt-brand-mark {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--yt-agua); color: #fff;
    display: grid; place-items: center; font-size: 1.1rem;
}
.yt-brand-text { font-family: var(--fonte-display); color: #fff; font-size: 1.35rem; line-height: 1; }
.yt-brand-text small { display: block; font-family: var(--fonte-texto); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--yt-agua-clara); margin-top: .2rem; }
.navbar-toggler { color: #fff; border: none; font-size: 1.4rem; }
.yt-offcanvas { background: var(--yt-floresta-escura); color: #eef4ef; }
.yt-offcanvas .btn-close { filter: invert(1); }
.yt-menu-mobile .nav-link { color: #eef4ef; font-size: 1.05rem; padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }

/* ------- Botões ------- */
.yt-btn-reserva {
    background: var(--yt-agua); color: #fff; border: none;
    border-radius: 100px; padding: .65rem 1.5rem; font-weight: 500;
    transition: transform .18s, background .18s, box-shadow .18s;
}
.yt-btn-reserva:hover { background: var(--yt-floresta); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,59,42,.3); }
.yt-btn-hero { padding: .9rem 2.2rem; font-size: 1.05rem; }

/* ------- Hero ------- */
.yt-hero { position: relative; min-height: 100svh; display: grid; align-items: center; color: #fff; overflow: hidden; }
.yt-hero-media, .yt-hero-swiper { position: absolute; inset: 0; }
.yt-hero-swiper .swiper-slide { background-size: cover; background-position: center; }
.yt-hero-fallback {
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(158,208,197,.35), transparent 60%),
        linear-gradient(160deg, #16301f 0%, #1d3b2a 45%, #27543a 100%);
}
.yt-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,15,.45) 0%, rgba(10,22,15,.25) 55%, rgba(18,39,27,.75) 100%); }
.yt-hero-conteudo { position: relative; z-index: 2; padding-top: 8rem; }
.yt-hero-kicker { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--yt-agua-clara); }
.yt-hero-titulo { font-family: var(--fonte-display); font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; line-height: 1.06; letter-spacing: -.015em; }
.yt-hero-sub { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 300; max-width: 560px; color: #e3ece6; margin: 1.25rem 0 2rem; }
.yt-hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; opacity: .7; animation: flutuar 2.4s ease-in-out infinite; }
@keyframes flutuar { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ------- Seções ------- */
.yt-secao { padding: 5.5rem 0; }
.yt-secao-clara { background: #fff; }
.yt-secao-verde { background: linear-gradient(160deg, var(--yt-floresta-escura), var(--yt-floresta)); }
.yt-topo-pagina {
    padding: 9rem 0 4rem;
    background:
        radial-gradient(900px 380px at 85% -20%, rgba(158,208,197,.25), transparent 60%),
        linear-gradient(160deg, #12271b, #1d3b2a 70%);
}
.yt-topo-compacto { padding: 7rem 0 2.6rem; }

/* ------- Pesquisa / cards ------- */
.yt-pesquisa { margin-top: -4.5rem; position: relative; z-index: 3; padding-bottom: 2rem; }
.yt-pesquisa-card { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 2rem; }
.yt-sticky { position: sticky; top: 6.5rem; }
.form-control, .form-select { border-radius: .8rem; border-color: #e2ded4; padding: .7rem .95rem; }
.form-control:focus, .form-select:focus { border-color: var(--yt-agua); box-shadow: 0 0 0 .2rem rgba(62,142,126,.15); }

.yt-card-quarto { background: #fff; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); transition: transform .22s; }
.yt-card-quarto:hover { transform: translateY(-6px); }
.yt-card-quarto-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.yt-card-quarto-media img { width: 100%; height: 100%; object-fit: cover; }
.yt-card-quarto-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.4rem; color: var(--yt-agua-clara); background: linear-gradient(150deg, #e9f2ee, #d5e7e0); }
.yt-card-quarto-cat { position: absolute; top: 1rem; left: 1rem; background: rgba(18,39,27,.85); color: #fff; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 100px; }
.yt-card-quarto-body { padding: 1.4rem 1.5rem 1.6rem; }
.yt-card-quarto-body h3, .yt-card-quarto-body h2 { font-family: var(--fonte-display); color: var(--yt-floresta); font-size: 1.25rem; }
.yt-card-quarto-info { color: var(--yt-nevoa); font-size: .88rem; }
.yt-card-quarto-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; }
.yt-preco { font-family: var(--fonte-display); color: var(--yt-madeira); font-size: 1.25rem; font-weight: 600; }
.yt-preco small { font-family: var(--fonte-texto); color: var(--yt-nevoa); font-weight: 400; font-size: .75rem; }

/* ------- Mosaico sobre ------- */
.yt-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.yt-mosaico > div {
    border-radius: var(--raio); padding: 2rem 1.4rem; color: #fff;
    display: flex; flex-direction: column; gap: .8rem; font-weight: 500;
    min-height: 150px; justify-content: flex-end;
}
.yt-mosaico i { font-size: 1.6rem; opacity: .9; }
.yt-mosaico-a { background: linear-gradient(150deg, #3e8e7e, #2a6a5c); }
.yt-mosaico-b { background: linear-gradient(150deg, #a8794f, #8a5f3a); margin-top: 1.6rem; }
.yt-mosaico-c { background: linear-gradient(150deg, #1d3b2a, #12271b); margin-top: -1.6rem; }
.yt-mosaico-d { background: linear-gradient(150deg, #5d9e75, #3f7d57); }

/* ------- Swipers ------- */
.yt-exp-swiper, .yt-dep-swiper { padding-bottom: 3rem; }
.yt-card-exp { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 2rem; height: 100%; }
.yt-card-exp h3 { font-family: var(--fonte-display); font-size: 1.2rem; color: var(--yt-floresta); }
.yt-card-exp-icone { color: var(--yt-agua); font-size: 1.5rem; margin-bottom: 1rem; }
.yt-depoimento { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--raio); padding: 2rem; color: #e7efe9; height: 100%; }
.yt-depoimento footer { color: var(--yt-agua-clara); margin-top: 1rem; font-weight: 500; }
.swiper-pagination-bullet-active { background: var(--yt-agua); }

/* ------- Accordion / FAQ ------- */
.yt-accordion .accordion-item { border: none; border-radius: 1rem !important; margin-bottom: .8rem; overflow: hidden; box-shadow: 0 6px 18px rgba(18,39,27,.06); }
.yt-accordion .accordion-button { font-weight: 500; color: var(--yt-floresta); background: #fff; padding: 1.1rem 1.3rem; }
.yt-accordion .accordion-button:not(.collapsed) { background: #eef6f2; box-shadow: none; }
.yt-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(62,142,126,.2); }

/* ------- Galeria ------- */
.yt-galeria { columns: 3 280px; column-gap: 1rem; }
.yt-galeria img { width: 100%; border-radius: 1rem; margin-bottom: 1rem; transition: transform .2s; }
.yt-galeria a:hover img { transform: scale(1.02); }

/* ------- Cardápio / mesa ------- */
.yt-item-cardapio { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: #fff; border-radius: 1rem; padding: 1rem 1.2rem; box-shadow: 0 4px 14px rgba(18,39,27,.05); margin-bottom: .7rem; }
.yt-qtd { display: flex; align-items: center; gap: .6rem; }
.yt-qtd button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--yt-agua); background: #fff; color: var(--yt-agua); font-size: 1.1rem; line-height: 1; }
.yt-qtd button:hover { background: var(--yt-agua); color: #fff; }
.yt-qtd-valor { min-width: 1.4rem; text-align: center; font-weight: 600; }
.yt-carrinho { position: fixed; bottom: 0; left: 0; right: 0; background: var(--yt-floresta-escura); color: #fff; padding: .9rem 0; z-index: 1000; box-shadow: 0 -8px 30px rgba(0,0,0,.25); }

/* ------- Passos da reserva ------- */
.yt-passos { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 2rem; flex-wrap: wrap; }
.yt-passos li { display: flex; align-items: center; gap: .5rem; color: var(--yt-nevoa); font-size: .9rem; padding: .45rem .95rem; border-radius: 100px; background: #fff; box-shadow: 0 3px 10px rgba(18,39,27,.06); }
.yt-passos li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #e6e1d6; font-size: .75rem; font-weight: 600; }
.yt-passos li.ativo { color: var(--yt-floresta); font-weight: 500; }
.yt-passos li.ativo span { background: var(--yt-agua); color: #fff; }
.yt-pix-qr { width: 240px; max-width: 80%; border-radius: 1rem; box-shadow: var(--sombra); margin-top: 1rem; }

/* ------- Resultado disponibilidade ------- */
.yt-quarto-resultado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #f7fbf9; border: 1.5px solid #dcece5; border-radius: 1rem; padding: 1rem 1.2rem; margin-bottom: .7rem; flex-wrap: wrap; }

/* ------- Amenidades / contato ------- */
.yt-amenidades { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; color: var(--yt-nevoa); }
.yt-lista-contato { list-style: none; padding: 0; }
.yt-lista-contato li { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid #e6e1d6; }
.yt-lista-contato i { color: var(--yt-agua); font-size: 1.2rem; width: 1.5rem; text-align: center; }
.yt-lista-contato a { color: var(--yt-tinta); text-decoration: none; }
.yt-mapa iframe { border: 0; border-radius: var(--raio); }

/* ------- CTA / erro / footer ------- */
.yt-cta { padding: 6rem 0; background: radial-gradient(800px 400px at 20% 0%, rgba(158,208,197,.2), transparent 60%), linear-gradient(160deg, #1d3b2a, #12271b); }
.yt-cta-sub { color: #cfe0d5; margin: 1rem 0 2rem; }
.yt-erro { padding: 10rem 0 6rem; }
.yt-erro-codigo { font-family: var(--fonte-display); font-size: clamp(5rem, 14vw, 9rem); color: var(--yt-agua-clara); line-height: 1; }

.yt-footer { background: var(--yt-floresta-escura); color: #b9c8be; }
.yt-footer-brand { font-family: var(--fonte-display); font-size: 1.6rem; color: #fff; }
.yt-footer-brand small { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--yt-agua-clara); }
.yt-footer-titulo { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.yt-footer-texto { font-weight: 300; font-size: .93rem; }
.yt-footer-links { list-style: none; padding: 0; }
.yt-footer-links a { color: #b9c8be; text-decoration: none; display: block; padding: .28rem 0; }
.yt-footer-links a:hover { color: var(--yt-agua-clara); }
.yt-footer-social { display: flex; gap: .7rem; margin-top: 1rem; }
.yt-footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #fff; transition: background .2s; }
.yt-footer-social a:hover { background: var(--yt-agua); }
.yt-newsletter { display: flex; gap: .6rem; }
.yt-footer-base { border-top: 1px solid rgba(255,255,255,.08); padding: 1.4rem 0; font-size: .85rem; text-align: center; }

.yt-whats-float {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1500;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366; color: #fff; font-size: 1.7rem;
    display: grid; place-items: center;
    box-shadow: 0 10px 26px rgba(37,211,102,.45);
    transition: transform .2s;
}
.yt-whats-float:hover { transform: scale(1.08); color: #fff; }

@media (max-width: 768px) {
    .yt-secao { padding: 3.6rem 0; }
    .yt-galeria { columns: 2 150px; }
    .yt-mosaico-b, .yt-mosaico-c { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .yt-hero-scroll { animation: none; }
}