.br-d{ display:inline; }

/* ==========================================================================
   1) TABLET E CELULAR  (<= 980px)
   ========================================================================== */
@media (max-width: 980px){

  body{ overflow-x: clip; }
  h1, h2, h3{ overflow-wrap: break-word; text-wrap: balance; }
  p{ text-wrap: pretty; }

  .section-pad{ padding-top: 64px; padding-bottom: 64px; }

  /* --- Colunas --------------------------------------------------------- */
  .two-col{ gap: 28px; }
  .page-casamentos #celebracao .two-col,
  .page-gastronomia #chef-morena-leite .two-col{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .page-hospedagem #privacidade .two-col{ align-items: start; }
  .page-casamentos #celebracao .col-heading h2{ max-width: none; }
  .page-casamentos .celebracao-text{ margin-left: 0; }
  .page-casamentos .celebracao-text p{ max-width: none; }
  .page-gastronomia #chef-morena-leite .col-heading{ align-self: start; }
  .page-gastronomia .chef-media{ margin-left: 0; max-width: 340px; }
  .page-hospedagem .two-col-note{ max-width: none; }

  /* --- Hero ------------------------------------------------------------ */
  .hero .hero-copy{
    padding: 44px var(--gutter) 60px;
    gap: 22px;
  }
  .hero .hero-media{
    order: -1;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
  .hero .hero-media img{ height: 100%; }

  /* --- Bloco imagem + texto (.hospedagem) ------------------------------ */
  .hospedagem-media{
    position: relative;
    overflow: hidden;
    order: -1;
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }
  .hospedagem-media > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    object-fit: cover;
  }
  .gastro-carousel-track, .natural-track{ position: absolute; inset: 0; height: auto; }
  .hospedagem-copy{
    padding: 56px var(--gutter) 64px !important;
    gap: 22px !important;
  }
  .hospedagem-copy p{ max-width: none; }

  /* --- Foto de fundo com texto sobreposto ------------------------------- */
  .mata-media,
  #ibiuna.mata-media,
  #experiencias-topo.mata-media,
  #perto-de-sp .mata-media,
  .page-retiros-e-imersoes #natureza .mata-media{
    display: flex;
    height: auto !important;
    min-height: 0 !important;
  }
  .mata-overlay,
  .page-a-reserva #ibiuna .mata-overlay,
  .page-a-reserva #perto-de-sp .mata-overlay,
  .page-experiencias #experiencias-topo .mata-overlay,
  .page-experiencias #nota-servico .mata-overlay{
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
    max-width: none !important;
    min-height: 520px;
    padding: 80px var(--gutter) !important;
    gap: 22px;
    background: linear-gradient(180deg, rgba(24,28,21,.5) 0%, rgba(24,28,21,.62) 100%);
  }
  .page-experiencias #nota-servico .mata-overlay{ min-height: 0; background: rgba(20,22,17,.58); }
  .mata-overlay p,
  .page-a-reserva #ibiuna .mata-overlay p{ max-width: none !important; }

  /* --- Imagem + texto em grade (gastronomia da home, eventos) ---------- */
  .gastro-row, .chef-row{ gap: 32px !important; }
  .gastro-row .media{
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
  .chef-row .media{ aspect-ratio: 1 / 1 !important; max-width: 340px; margin-left: 0; }
  .chef-row{ margin-top: 40px; }
  .page-eventos-empresariais #gastronomia .gastro-row{ gap: 32px !important; }
  .page-eventos-empresariais #gastronomia .gastro-content{ padding-right: 0; }

  /* --- Faixa de 3 fotos altas (home) ----------------------------------- */
  .ritmo-images img{ aspect-ratio: 197 / 440; }

  /* --- Chamada final -------------------------------------------------- */
  .ideia-copy{ padding: 56px var(--gutter) 64px; }
  .ideia-media{ aspect-ratio: 4 / 3; min-height: 0; }

  /* --- Rodapé: links com área de toque confortável ---------------------- */
  .footer-col{ gap: 0; }
  .footer-col .footer-title{ margin-bottom: 8px; }
  .footer-col a{ padding: 8px 0 6px; }
}


/* ==========================================================================
   2) CELULAR  (<= 560px)
   ========================================================================== */
@media (max-width: 560px){

  :root{
    --gutter: 22px;

    /* escala tipográfica */
    --h-xl: clamp(1.95rem, 8.4vw, 2.4rem);
    --h-lg: clamp(1.7rem, 7.2vw, 2.15rem);
    --h-md: clamp(1.4rem, 5.8vw, 1.7rem);
    --p:    1.04rem;
  }

  .section-pad{ padding-top: 60px; padding-bottom: 60px; }
  .br-d{ display: none; }

  /* --- Tipografia ------------------------------------------------------ */
  h1, h2, h3{ line-height: 1.14; }
  .display-xl{ font-size: var(--h-xl) !important; }
  .display-lg{ font-size: var(--h-lg) !important; }
  .display-md{ font-size: var(--h-md) !important; line-height: 1.2; }
  .gastro-content .gastro-closing{ font-size: 1.08rem !important; line-height: 1.5; margin-top: 4px; }
  .ritmo-statement h3{ font-size: var(--h-md) !important; line-height: 1.25; margin-bottom: 26px; }
  .footer-follow-title{ font-size: 1.3rem; }

  main p{
    font-size: var(--p) !important;
    line-height: 1.68;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 4; 
  }
  /* o espaçamento entre parágrafos vem do gap do contêiner */
  .hero-copy p, .ideia-copy p, .mata-overlay p{ margin-bottom: 0; }
  .hero-copy p + p{ margin-top: 0; }
  /* textos de cartões e listas ficam um passo menor */
  .diferente-card, .cenarios-card, .espacos-card, .mesa-card, .motivos-card,
  .intencao-card, .quarto-copy, .exp-copy, .natural-item, .formatos-item,
  .encontros-item, .reserva-stat{ --p: 1rem; }
  .gallery-caption{ --p: .88rem; }
  .quarto-copy, .espacos-card{ --p: .96rem; }

  .eyebrow{ font-size: .78rem; letter-spacing: .14em; line-height: 1.5; }
  .ideia-copy .eyebrow, .hero-copy .eyebrow, .quartos-head .eyebrow{ font-size: .78rem; }
  .link-arrow{ font-size: .86rem; letter-spacing: .12em; line-height: 1.5; }

  /* --- Botões ---------------------------------------------------------- */
  .btn, .final-cta-link{
    display: block;
    width: 100%;
    padding: 18px 22px;
    font-size: .82rem;
    letter-spacing: .1em;
    line-height: 1.45;
    text-align: center;
  }
  .btn-light, .page-contato .formulario-explore{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    line-height: 1.45;
    text-align: left;
  }
  .hero-actions{ flex-direction: column; align-items: stretch; gap: 26px; margin-top: 8px; }
  .hero-actions .link-arrow{ align-self: flex-start; }
  .final-cta-actions{ align-items: stretch; }

  /* --- Cabeçalho ------------------------------------------------------- */
  .site-header .wrap{ padding-top: 12px; padding-bottom: 12px; }
  .logo img{ height: 38px; }
  .nav-toggle{ padding: 10px; margin-right: -10px; }
  .main-nav{ padding-top: 28px; gap: 24px; }
  .main-nav .nav-cta{ width: 100%; text-align: center; margin-top: 8px; }

  /* --- Hero ------------------------------------------------------------ */
  .hero .hero-copy{ padding: 40px var(--gutter) 56px; gap: 22px; }
  .hero .hero-copy .eyebrow{ margin-bottom: 0; }
  .hero .hero-media{ aspect-ratio: 9 / 10 !important; }
  .video-frame{ aspect-ratio: 16 / 10; }

  /* --- Colunas empilhadas ---------------------------------------------- */
  .two-col{ gap: 28px; }
  .col-heading .eyebrow + h2{ margin-top: 18px; }
  .col-heading h2 + p, .selo-copy h2 + p{ margin-top: 20px; }
  .selo-copy h2{ margin-top: 0; }
  .page-hospedagem .quartos-head{ text-align: left; }
  .encontros-intro{ margin-top: 30px; max-width: none; }
  .encontros-item{ padding: 26px 0; gap: 12px; }
  .encontros-item h4{ font-size: 1.1rem; }

  /* --- Bloco imagem + texto ------------------------------------------- */
  .hospedagem-media{ aspect-ratio: 1 / 1; }
  .hospedagem-copy{ padding: 48px var(--gutter) 60px !important; gap: 20px !important; }
  .page-espacos .hospedagem-copy{ padding-bottom: 60px !important; }
  .media-arrow-btn,
  .page-home .media-arrow-btn,
  .page-a-reserva .media-arrow-btn,
  .page-espacos .media-arrow-btn,
  .page-gastronomia .media-arrow-btn{
    width: 48px; height: 48px;
    right: 16px; bottom: 16px;
  }
  .media-arrow-btn svg{ width: 18px; height: 18px; }

  /* --- Gastronomia (home e eventos) ------------------------------------ */
  .gastro-row .media{ aspect-ratio: 10 / 11 !important; }
  .chef-row .media{ aspect-ratio: 10 / 11 !important; max-width: none; }
  .gastro-content{ gap: 20px; }
  .gastro-brand img{ height: 50px; }
  .gastro-row{ margin-bottom: 0; }
  .chef-row{ margin-top: 56px; }

  /* --- Ritmo do dia (home) --------------------------------------------- */
  .ritmo-top{ gap: 32px; margin-bottom: 32px; }
  .ritmo-images{ gap: 8px; }
  .ritmo-copy{ gap: 20px; margin-bottom: 32px; }

  /* --- Foto de fundo com texto ---------------------------------------- */
  .mata-overlay,
  .page-a-reserva #ibiuna .mata-overlay,
  .page-a-reserva #perto-de-sp .mata-overlay,
  .page-experiencias #experiencias-topo .mata-overlay{
    min-height: 480px;
    padding: 72px var(--gutter) !important;
    gap: 20px;
  }
  .page-experiencias #nota-servico .mata-overlay{ padding: 64px var(--gutter) !important; }
  .mata-overlay .bold, .mata-overlay p.bold{ font-weight: 500; }
  .reserva-stats{ gap: 16px !important; padding-top: 24px; }

  /* --- Cartões e grades -------------------------------------------------- */
  .diferente-head{ text-align: left !important; margin: 0 0 32px !important; max-width: none; }
  .diferente-card{ padding: 30px 26px 34px; min-height: 0; }
  .diferente-card h4{ font-size: 1.35rem; }
  .diferente-card .tag{ margin-bottom: 12px; }

  .viva-head{ margin-bottom: 36px; }
  .viva-head h2{ margin-bottom: 16px; }
  .gallery-grid{ gap: 16px; }
  .gallery-item{ aspect-ratio: 5 / 6; }
  .gallery-caption{ padding: 16px 18px 18px; }

  .page-casamentos .cenarios-head{ gap: 18px; margin-bottom: 36px; }
  .page-casamentos .cenarios-grid{ margin-top: 0; }
  .page-casamentos .cenarios-card{ min-height: 0; padding: 30px 24px 32px; }
  .page-casamentos .cenarios-card h4{ font-size: 1.3rem; margin-bottom: 10px; }

  .page-a-reserva .intencao-grid{ margin-top: 0; }
  .page-a-reserva .intencao-card{ min-height: 0; padding: 28px 24px; }
  .page-a-reserva .intencao-statement{ margin-top: 40px; }
  .page-a-reserva .intencao-head{ margin-bottom: 32px; }
  .page-a-reserva .selo-media img{ width: 120px; }
  .page-a-reserva .hospedagem-copy{ gap: 20px !important; }
  .page-a-reserva .estrutura-divider{ margin: 2px 0; }

  .page-espacos .espacos-grid{ margin-top: 28px; }
  .page-espacos .espacos-card{ min-height: 0; padding: 28px 24px 30px; }
  .page-espacos .espacos-card h4{ font-size: 1.25rem; }
  .page-espacos .espacos-card p{ margin-top: 16px; max-width: none; }
  .page-espacos .natural-item{ padding: 18px 0; }
  .page-espacos .natural-item h4{ font-size: 1.15rem; margin-bottom: 8px; }
  .page-espacos .natural-item p{ max-width: none; }

  .page-gastronomia .mesa-head{ gap: 18px; }
  .page-gastronomia .mesa-grid{ margin-top: 32px; }
  .page-gastronomia .mesa-card{ min-height: 0; padding: 26px 24px 28px; }
  .page-gastronomia .mesa-card .eyebrow{ margin-bottom: 12px; }
  .page-gastronomia .mesa-statement{ margin-top: 40px; text-align: left; }
  .page-gastronomia .gastro-table{ margin-top: 32px; }
  .page-gastronomia .gastro-cell{ padding: 22px 0; }
  .page-gastronomia .gastro-cell span{ font-size: .95rem; line-height: 1.45; }
  .page-gastronomia .chef-media{ max-width: none; aspect-ratio: 10 / 11; }
  .page-gastronomia .chef-media img{ object-position: center 20%; }
  .page-gastronomia #chef-morena-leite{ padding-top: 52px; }

  .page-hospedagem .hero-copy{ padding-left: var(--gutter); }
  .page-hospedagem .motivos-grid{ margin-top: 32px; }
  .page-hospedagem .motivos-card{ min-height: 0; padding: 26px 24px; }
  .page-hospedagem .ficar-item{ padding: 17px 0; }
  .page-hospedagem .ficar-item span{ font-size: .98rem; }
  .page-hospedagem .quartos-head p{ margin-top: 16px; }
  .page-hospedagem .quartos-grid{ row-gap: 44px; margin-top: 32px; }
  .page-hospedagem .quartos-grid--single{ margin-top: 44px; }
  .page-hospedagem .quarto-copy{ margin-top: 18px; }
  .page-hospedagem .quarto-copy h4{ font-size: 1.15rem; }
  .page-hospedagem .quarto-copy p{ max-width: none; }

  .formatos-item{ padding: 24px 0 !important; }
  .page-eventos-empresariais .formatos-item h4,
  .page-retiros-e-imersoes .formatos-item h4{ font-size: .98rem; }

  .page-eventos-empresariais .espacos-galeria-head{ margin-bottom: 32px; }
  .espacos-gallery{ margin-top: 32px; }

  /* --- Carrosséis ----------------------------------------------------------- */
  .gallery-slide-caption{ font-size: .8rem; margin-top: 12px; }
  .gallery-arrow{ top: 32%; }

  /* Experiências: uma única faixa rolável com todos os cartões */
  .page-experiencias #lista-experiencias .wrap{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .page-experiencias #lista-experiencias .wrap::-webkit-scrollbar{ display: none; }
  .page-experiencias .exp-grid,
  .page-experiencias .exp-grid--single{ display: contents; }
  .page-experiencias .exp-card{ flex: 0 0 80%; scroll-snap-align: start; height: auto; }
  .page-experiencias .exp-copy{ margin-top: 18px; }
  .page-experiencias .exp-copy h4{ font-size: 1.1rem; margin-bottom: 10px; }
  .page-experiencias .exp-btn{ margin-top: 6px; }
  .page-experiencias .final-cta-actions{ gap: 16px; margin-top: 32px; }
  .page-experiencias .nota-overlay .eyebrow{ font-size: .82rem; }

  /* --- Chamadas finais (cta-split) ------------------------------------- */
  .cta-split{ flex-direction: column !important; gap: 32px !important; }
  .cta-main{ flex-basis: auto !important; max-width: none !important; }
  .cta-main p{ margin-top: 20px !important; max-width: none !important; }
  .cta-side{ width: 100%; padding-top: 0 !important; }
  .cta-side .divider{ display: none !important; }
  .cta-side-content{ flex: 1 1 auto; gap: 14px !important; }
  .cta-label{ font-size: .95rem !important; }

  .ideia-copy{ padding: 52px var(--gutter) 60px; gap: 20px; }
  .ideia-media{ aspect-ratio: 6 / 5; }

  /* --- Formulário ---------------------------------------------------------- */
  .page-contato .hero-copy{ padding-top: 40px; gap: 22px; }
  .page-contato .formulario-grid{ gap: 36px; }
  .page-contato .formulario-divider{ margin: 26px 0 26px; }
  .page-contato .formulario-explore{ margin-top: 28px; }
  .page-contato .formulario-panel{ padding: 30px 22px 28px; }
  .page-contato .formulario-section{ margin-bottom: 32px; }
  .page-contato .formulario-section-head{ padding-bottom: 14px; margin-bottom: 26px; }
  .page-contato .formulario-fields{ row-gap: 24px; }
  .page-contato .field + .field{ margin-top: 24px; }
  .page-contato .tipo-evento{ grid-template-columns: 1fr 1fr; }
  .page-contato .tipo-evento label{ padding: 16px 8px; font-size: .9rem; }
  .page-contato .tipo-evento label:last-of-type{ grid-column: 1 / -1; }
  .page-contato .formulario-submit{ margin-top: 12px; }

  /* --- Retiros: linha do tempo em 2 colunas ------------------------------------ */
  .page-retiros-e-imersoes .imersao-header{ gap: 24px; margin-bottom: 44px; }
  .page-retiros-e-imersoes .timeline{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    margin-bottom: 48px;
  }
  .page-retiros-e-imersoes .timeline-item{ padding-top: 0; padding-left: 24px; }
  .page-retiros-e-imersoes .timeline-item::before{ top: 8px; }
  .page-retiros-e-imersoes .timeline-item span{ font-size: 1.05rem; }

  /* --- Política de cancelamento ------------------------------------------------ */
  .page-politica-de-cancelamento .politica-list li{ padding: 24px 0; font-size: 1rem; }
  .page-politica-de-cancelamento .politica-body{ padding-bottom: 72px; }

  /* --- Rodapé -------------------------------------------------------------------- */
  .site-footer{ padding: 56px 0 28px; }
  .footer-top{ gap: 44px; }
  .footer-brand{ gap: 18px; max-width: none; }
  .footer-logo img{ height: 72px; }
  .footer-cols{ flex-direction: column; gap: 32px; width: 100%; }
  .footer-col a{ font-size: .84rem; letter-spacing: .1em; }
  .footer-bottom{ margin-top: 44px; padding-top: 24px; font-size: .8rem; }

  /* --- Animação de entrada mais curta ------------------------------------------------ */
  .js-ready .reveal{ transform: translateY(20px); }
  .reveal{ transition-duration: .8s; }
}


/* ==========================================================================
   3) CELULARES PEQUENOS  (<= 380px)
   ========================================================================== */
@media (max-width: 380px){
  :root{ --gutter: 20px; --h-xl: 1.85rem; --h-lg: 1.62rem; --h-md: 1.35rem; --p: 1rem; }
  .hero .hero-copy{ padding-top: 34px; }
  .gastro-brand{ flex-wrap: wrap; gap: 12px; }
  .page-contato .tipo-evento label{ font-size: .86rem; }
  .btn, .final-cta-link, .btn-light{ letter-spacing: .08em; }
  .page-contato .formulario-submit{ padding: 18px 18px; letter-spacing: .08em; font-size: .78rem; }
}


/* ==========================================================================
   4) TOQUE (sem hover): evita estados "grudados" depois do toque
   ========================================================================== */
@media (hover: none){
  .btn:hover,
  .page-casamentos .btn-light:hover, .page-espacos .btn-light:hover,
  .page-eventos-empresariais .btn-light:hover, .page-gastronomia .btn-light:hover,
  .page-contato .btn-light:hover{
    transform: none !important;
    box-shadow: none !important;
  }
  .gallery-item:hover img,
  .page-experiencias .exp-card:hover .exp-media img,
  .page-hospedagem .quarto-card:hover .quarto-slide.is-active img{ transform: none; }
  .gallery-arrow:hover{ transform: translateY(-50%); }
  .video-play-btn:hover{ transform: translate(-50%, -50%); }
}