/* =================================================================
   ECOPRIVILLEGE HOTEL — Landing Page
   Folha de estilo principal · Mobile-first
   Sumário:
   1.  Variáveis & Reset
   2.  Tipografia & Utilitários
   3.  Botões & Links
   4.  Header (nav)
   5.  Hero
   6.  Barra de reserva
   7.  Destaques
   8.  Acomodações
   9.  Galeria
   10. Experiência
   11. Serviços & comodidades
   12. Depoimentos
   13. Localização
   14. Conversão (contato)
   15. Footer
   16. WhatsApp flutuante
   17. Banner de cookies (LGPD)
   18. Animações (reveal)
   19. Media queries (tablet / desktop)
   ================================================================= */

/* ============ 1. VARIÁVEIS & RESET ============ */
:root {
  /* Identidade Ecoprivillege — verde-escuro profundo + dourado */
  --c-base:      #0E211C;  /* fundo principal */
  --c-base-alt:  #123028;  /* fundo escuro alternativo */
  --c-forest:    #1C4A3A;  /* verde floresta (cards, seção) */
  --c-leaf:      #2E7D5B;  /* verde folha */
  --c-leaf-br:   #3FB07A;  /* verde vivo (detalhes, hovers, bordas) */
  --c-gold:      #D9A53C;  /* dourado da marca */
  --c-gold-lt:   #E7C67E;  /* dourado claro (hover) */
  --c-gold-dk:   #7A5C18;  /* dourado escuro (texto miúdo em fundo claro) */
  --c-cream:     #F4EFE4;  /* creme: texto no escuro / fundo claro */
  --c-cream-2:   #EBE3D2;
  --c-text-dark: #16241F;  /* texto sobre fundo claro */
  --c-muted:     #C9D6CE;  /* secundário no escuro */
  --c-muted-dk:  #4A5A52;  /* secundário no claro */
  --c-line:      rgba(22,36,31,.14);   /* bordas no claro */
  --c-line-dk:   rgba(63,176,122,.22); /* bordas no escuro */
  --c-white:     #ffffff;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius: 4px;
  --header-h: 56px;   /* só a nav-bar (a barra de utilidades foi removida) */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--c-cream);
  background: var(--c-base);
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 16px;
}

img, iframe { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============ 2. TIPOGRAFIA & UTILITÁRIOS ============ */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.12; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1rem;
}
/* Variante para as seções de fundo claro (dourado escuro: contraste AA) */
.eyebrow--dark { color: var(--c-gold-dk); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.section-head h2 { font-size: clamp(2rem, 6vw, 3.1rem); }
.section-lead { color: var(--c-muted); margin-top: 1rem; font-size: 1.05rem; font-weight: 500; }

/* Acessibilidade: skip link (Nielsen — controle e liberdade) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--c-gold); color: var(--c-text-dark);
  padding: .8rem 1.4rem; font-size: .85rem;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Foco visível global */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-leaf-br);
  outline-offset: 3px;
}

/* ============ 3. BOTÕES & LINKS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.1rem;
  font-family: var(--font-sans);
  font-weight: 600; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: var(--radius);
  transition: all .35s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--gold { background: var(--c-gold); color: var(--c-text-dark); }
.btn--gold:hover { background: var(--c-gold-lt); transform: translateY(-2px); }
.btn--dark { background: var(--c-forest); color: var(--c-cream); }
.btn--dark:hover { background: var(--c-leaf); transform: translateY(-2px); }
.btn--light { background: var(--c-cream); color: var(--c-text-dark); }
.btn--light:hover { background: var(--c-cream-2); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--c-cream); border-color: rgba(244,239,228,.6); }
.btn--ghost:hover { background: rgba(244,239,228,.12); border-color: var(--c-cream); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-gold-dk);
  transition: gap .3s var(--ease), color .3s;
}
.link-arrow::after { content: '→'; transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--c-text-dark); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ============ 4. HEADER ============ */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-bar {
  background: transparent;
  transition: background .4s var(--ease), padding .4s var(--ease);
  padding: .4rem 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }

/* Símbolo + assinatura lado a lado; o alt fica vazio porque o <a> já tem
   aria-label e o texto ao lado repete o nome. */
/* min-width:0 + overflow hidden: numa tela estreita quem cede é a assinatura,
   nunca o botão de menu — ele é o único caminho para a navegação. */
.brand { display: flex; align-items: center; gap: .8rem; line-height: 1; color: var(--c-cream); transition: color .4s; min-width: 0; overflow: hidden; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
/* Altura casada com o bloco de texto ao lado (marca + assinatura ≈ 40px) */
.brand-logo { width: auto; height: 32px; flex-shrink: 0; }
.brand-mark { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .14em; }
/* HOTEL fica abaixo do nome, formando "ECO PRIVILLEGE HOTEL" */
.brand-sub { font-size: .64rem; letter-spacing: .38em; margin-top: 3px; opacity: .85; }
/* A variante do rodapé está na seção 15, junto do resto do footer. */

.nav { display: none; }
.nav a {
  font-size: .82rem; font-weight: 500; letter-spacing: .1em; color: var(--c-cream);
  padding: .5rem 0; position: relative; transition: color .3s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--c-leaf-br); transition: width .3s var(--ease);
}
.nav a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.nav-cta {
  display: inline-flex; align-items: center;
  padding: .72rem 1.5rem; background: var(--c-gold); color: var(--c-text-dark);
  font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--radius); transition: background .3s, transform .3s;
  white-space: nowrap;   /* sem isto ele quebra em duas linhas no celular */
}
.nav-cta:hover { background: var(--c-gold-lt); transform: translateY(-2px); }
/* Só existe dentro da gaveta: some na barra e reaparece com o menu aberto */
.nav-cta--mobile { display: none; }
body.menu-open .nav-cta--mobile { display: inline-flex; justify-content: center; margin-top: 1.2rem; }
/* A gaveta tem fundo escuro fixo, então ignora o estado "rolado" do header */
.site-header.scrolled .nav-cta--mobile { background: var(--c-gold); color: var(--c-text-dark); }

/* Celular: marca e CTA encolhem para caber numa linha só ao lado do menu.
   O rótulo vira "Reservar" — "Reservar agora" não cabe sem espremer tudo. */
@media (max-width: 599px) {
  .brand { gap: .6rem; }
  .brand-logo { height: 26px; }
  .brand-mark { font-size: .95rem; letter-spacing: .1em; white-space: nowrap; }
  .brand-sub { font-size: .54rem; letter-spacing: .3em; white-space: nowrap; }
  .nav-inner { gap: .6rem; }
  .nav-actions { gap: .7rem; }
  .nav-cta { padding: .55rem .85rem; font-size: .64rem; letter-spacing: .08em; }
  .nav-cta .cta-longo { display: none; }
}

/* Telas bem estreitas (iPhone SE e afins): só a marca e o botão de menu.
   O CTA da barra sai — a mesma reserva continua a um toque no hero e na
   barra de disponibilidade logo abaixo. */
@media (max-width: 359px) {
  .nav-actions .nav-cta { display: none; }
  .brand-mark { font-size: .88rem; }
}

/* Estado: header rolado (fundo verde-escuro sólido) */
/* Header rolado em creme: o #0E211C virava uma faixa quase preta passando por
   cima das seções claras, e o azul-marinho da logo desaparecia nela. */
.site-header.scrolled .nav-bar { background: var(--c-cream); box-shadow: 0 6px 30px rgba(8,18,15,.18); }
.site-header.scrolled .brand,
.site-header.scrolled .nav a { color: var(--c-text-dark); }
.site-header.scrolled .nav a::after { background: var(--c-gold-dk); }
/* O dourado sobre creme dá 1.95:1 — o CTA vira verde para o limite do botão aparecer */
.site-header.scrolled .nav-cta { background: var(--c-forest); color: var(--c-cream); }
.site-header.scrolled .nav-cta:hover { background: var(--c-leaf); }
/* A gaveta mobile é sempre escura: sem isto, ao abrir o menu já rolado, os
   links herdavam a cor de texto do header claro e sumiam no próprio fundo. */
body.menu-open .site-header .nav a { color: var(--c-cream); }

/* Menu hambúrguer — flex-shrink: 0 e box-sizing fixo: é o último elemento da
   linha e era ele que perdia largura (aparecendo cortado) quando marca + CTA
   apertavam a barra no celular. O padding leva o alvo de toque a 44px. */
.menu-toggle {
  display: flex; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; padding: 11px 7px;
  justify-content: center; align-items: stretch;
  flex: 0 0 auto; margin-right: -7px;   /* compensa o padding: o traço fica alinhado à margem */
}
.menu-toggle span { display: block; height: 2px; width: 100%; background: var(--c-cream); transition: transform .35s var(--ease), opacity .3s; }
.site-header.scrolled .menu-toggle span { background: var(--c-text-dark); }

/* Com o menu aberto a gaveta passava por cima do próprio botão e o X ficava
   inalcançável — só dava para sair pelo ESC. Aqui ele volta para a frente,
   sozinho (o CTA da barra sai, já há um "Reservar agora" dentro da gaveta)
   e sempre em creme, porque o fundo atrás dele agora é a gaveta escura. */
body.menu-open .nav-actions { position: relative; z-index: 1000; }
body.menu-open .nav-actions .nav-cta { display: none; }
body.menu-open .site-header .menu-toggle span { background: var(--c-cream); }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ 5. HERO ============ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.6s var(--ease), transform 7s linear;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
/* Foto do hero: recorte vertical no celular, panorâmico a partir de 600px */
.hero-slide { background-image: url('../img/hero-mobile.jpg'); }
@media (min-width: 600px) { .hero-slide { background-image: url('../img/hero-desktop.jpg'); } }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,33,28,.55) 0%, rgba(14,33,28,.3) 40%, rgba(14,33,28,.85) 100%);
}
/* Alinhado ao gutter do .container (mesma coluna do logo e das demais seções) */
.hero-content { position: relative; z-index: 2; color: var(--c-cream); padding-top: var(--header-h); }
.hero-title { font-size: clamp(2.6rem, 9vw, 5.2rem); font-weight: 700; margin-bottom: 1.5rem; }
.hero-text { font-size: clamp(1.05rem, 3vw, 1.35rem); font-weight: 400; max-width: 540px; margin-bottom: 2.4rem; opacity: .95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-scroll { position: absolute; bottom: 30px; right: 30px; z-index: 3; width: 26px; height: 44px; border: 1px solid rgba(244,239,228,.5); border-radius: 14px; display: none; }
.hero-scroll span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; background: var(--c-cream); border-radius: 2px; transform: translateX(-50%); animation: scrollDot 1.8s infinite; }
@keyframes scrollDot { 0%{opacity:0;top:8px} 30%{opacity:1} 60%{opacity:1;top:24px} 100%{opacity:0;top:24px} }

/* ============ 6. BARRA DE RESERVA ============ */
.booking { background: var(--c-base-alt); padding: 2.4rem 0; position: relative; z-index: 5; border-top: 1px solid var(--c-line-dk); }
.booking-title { color: var(--c-cream); text-align: center; font-size: 1.6rem; margin-bottom: .5rem; }
.booking-lead { color: var(--c-muted); text-align: center; font-size: .92rem; margin-bottom: 1.6rem; }
.booking-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: end; }
.booking-form .field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.booking-form label { color: var(--c-muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
/* Campos em creme: o fill translúcido anterior resolvia para #15392E sobre a
   seção #123028 (1.12:1) — o limite do campo era invisível. Em creme dá 12.38:1,
   e os ícones nativos (calendário do type=date, seta do select) voltam a ser
   glifos escuros sobre claro, sem precisar de filter/appearance. */
.booking-form input, .booking-form select {
  background: var(--c-cream); border: 1px solid rgba(22,36,31,.30); color: var(--c-text-dark);
  padding: .85rem .9rem; font-family: var(--font-sans); font-size: .95rem; border-radius: var(--radius);
  width: 100%; min-width: 0;   /* input[type=date] impõe uma largura mínima que vazava em telas ~320px */
}
.booking-form select option { color: var(--c-text-dark); }
.booking-form input::placeholder { color: var(--c-muted-dk); }
.booking-form input:hover, .booking-form select:hover { border-color: var(--c-forest); }
/* Foco: anel dourado por fora, sobre o fundo escuro (6.35:1).
   Dourado como borda interna daria 1.95:1 contra o creme — falharia. */
.booking-form input:focus, .booking-form select:focus {
  border-color: var(--c-forest); outline: 2px solid var(--c-gold); outline-offset: 2px;
}
/* Botão da barra: .btn--dark (#1C4A3A) dava 1.41:1 sobre #123028 */
.booking-form .btn { width: 100%; }
.booking-form .btn--dark { background: var(--c-gold); color: var(--c-text-dark); }
.booking-form .btn--dark:hover { background: var(--c-gold-lt); }
.booking-feedback { color: var(--c-gold); text-align: center; margin-top: 1rem; font-size: .92rem; min-height: 1.2em; }
/* Saída alternativa para quem quer ver as tarifas antes de escolher datas */

/* --- Calendário próprio (o popup nativo do navegador não é estilizável) ---
   Só entra em ponteiro fino (desktop); no toque fica o seletor do sistema.
   A classe .has-ep-cal é aplicada pelo JS apenas nesse caso. */
.booking-form .field { position: relative; }
.has-ep-cal .booking-form input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.has-ep-cal .booking-form input[type="date"] {
  cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5C18' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 17px;
}
/* Painel em creme: em verde-escuro ele ficava com o MESMO #123028 da seção
   (contraste 1:1), separado só pela borda. Em creme dá 12.38:1 e acompanha
   os campos, que também são claros. */
.ep-cal {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 296px; padding: 1rem;
  background: var(--c-cream); border: 1px solid rgba(22,36,31,.18); border-radius: var(--radius);
  box-shadow: 0 26px 64px rgba(8,18,15,.55); font-family: var(--font-sans); color: var(--c-text-dark);
}
.ep-cal[hidden] { display: none; }
.ep-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.ep-cal-title { font-family: var(--font-serif); font-size: 1.25rem; text-transform: capitalize; letter-spacing: .02em; color: var(--c-text-dark); }
.ep-cal-nav {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-gold-dk); border: 1px solid rgba(22,36,31,.20); font-size: 1rem; line-height: 1;
  transition: background .25s var(--ease), border-color .25s, color .25s;
}
.ep-cal-nav:hover:not([disabled]) { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-cream); }
.ep-cal-nav[disabled] { opacity: .3; cursor: default; }
.ep-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ep-cal-wd { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted-dk); text-align: center; padding: .45rem 0; }
/* color explícito: o reset global de button não herda cor */
.ep-cal-day {
  color: var(--c-text-dark); aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; border-radius: 3px; cursor: pointer; transition: background .2s, color .2s;
}
.ep-cal-day:hover:not([disabled]) { background: rgba(28,74,58,.14); }
.ep-cal-day[disabled] { color: var(--c-muted-dk); opacity: .38; cursor: default; }
.ep-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--c-gold-dk); }
/* Selecionado em verde-floresta (8.76:1 no creme). Dourado daria 1.95:1. */
.ep-cal-day.is-sel { background: var(--c-forest); color: var(--c-cream); font-weight: 500; }
.ep-cal-day.is-sel:hover { background: var(--c-leaf); }
.ep-cal-blank { aspect-ratio: 1; }

/* ============ 7. DESTAQUES ============ */
.highlights { padding: 6rem 0; }
.highlights-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.highlight { text-align: center; padding: 2.4rem 1.6rem; background: var(--c-base-alt); border: 1px solid var(--c-line-dk); border-radius: var(--radius); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.highlight:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(8,18,15,.45); border-color: var(--c-leaf-br); }
.highlight-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-forest); margin-bottom: 1.3rem; }
.highlight-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--c-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.highlight h3 { font-size: 1.5rem; margin-bottom: .7rem; color: var(--c-cream); }
.highlight p { color: var(--c-muted); font-size: .97rem; }

/* ============ 8. ACOMODAÇÕES (seção clara) ============ */
.rooms { padding: 6rem 0; background: var(--c-cream); color: var(--c-text-dark); }
.rooms .section-head h2 { color: var(--c-text-dark); }
.rooms .section-lead { color: var(--c-muted-dk); }
.rooms-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.room-card { background: var(--c-white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 40px rgba(22,36,31,.08); transition: transform .4s var(--ease), box-shadow .4s; }
.room-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(22,36,31,.16); }
.room-img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.room-card:hover .room-img img { transform: scale(1.07); }
.room-tag { position: absolute; bottom: 14px; left: 14px; background: rgba(14,33,28,.88); color: var(--c-cream); font-size: .76rem; letter-spacing: .08em; padding: .5rem .9rem; border-radius: var(--radius); }
.room-body { padding: 1.8rem; }
.room-body h3 { font-size: 1.7rem; margin-bottom: .6rem; color: var(--c-text-dark); }
.room-body > p { color: var(--c-muted-dk); margin-bottom: 1.1rem; font-size: .97rem; }
.room-feats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.room-feats li { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gold-dk); border: 1px solid var(--c-line); padding: .35rem .75rem; border-radius: 50px; }

/* ============ 9. GALERIA ============ */
.gallery { padding: 6rem 0; }
/* Mosaico. As colunas são sempre 2 ou 4 (divisores de 16), então nunca sobra
   célula vazia no fim. A altura da linha vem de vw para o bloco acompanhar a
   largura da tela e as proporções não mudarem. */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 36vw; gap: 12px; margin-top: 1rem; }
.gallery-item { overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-open { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; position: relative; }
/* Ícone de lupa que aparece no hover, para a foto se anunciar como clicável */
.gallery-open::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: rgba(14,33,28,.35) center / 34px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EFE4' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E");
  transition: opacity .35s var(--ease);
}
.gallery-open:hover::after, .gallery-open:focus-visible::after { opacity: 1; }

/* ---- Lightbox ---- */
.lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(8,18,15,.94); padding: 3.5rem 1rem 5rem; }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; max-width: 1400px; width: 100%; text-align: center; }
.lb-img { max-width: 100%; max-height: calc(100vh - 9rem); margin: 0 auto; object-fit: contain; border-radius: var(--radius); }
.lb-cap { color: var(--c-muted); font-size: .9rem; margin-top: 1rem; }
.lb-count { color: var(--c-gold); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin-top: .5rem; }
.lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: var(--c-cream); font-size: 1.5rem; line-height: 1;
  background: rgba(63,176,122,.12); border: 1px solid var(--c-line-dk); transition: background .3s, border-color .3s; }
.lb-btn:hover { background: var(--c-forest); border-color: var(--c-leaf-br); }
.lb-prev { left: 2%; top: 50%; transform: translateY(-50%); }
.lb-next { right: 2%; top: 50%; transform: translateY(-50%); }
.lb-close { top: 1.2rem; right: 1.2rem; font-size: 1.3rem; }
@media (max-width: 599px) {
  .lb-prev { left: 50%; transform: translateX(-140%); top: auto; bottom: 1rem; }
  .lb-next { right: 50%; transform: translateX(140%); top: auto; bottom: 1rem; }
}

/* ============ 10. EXPERIÊNCIA ============ */
/* Seção clara: os dourados aqui usam a variante escura (--c-gold-dk).
   O --c-gold #D9A53C sobre creme dá só 1.95:1 e sumiria. */
.experience { display: grid; grid-template-columns: 1fr; background: var(--c-cream); color: var(--c-text-dark); }
.exp-media { min-height: 60vh; background-size: cover; background-position: center; }
.exp-content { padding: 4rem 22px; max-width: 620px; }
.exp-content h2 { font-size: clamp(2rem, 6vw, 2.9rem); margin-bottom: 1.3rem; color: var(--c-text-dark); }
.exp-content p { color: var(--c-muted-dk); margin-bottom: 1.1rem; }
/* p.eyebrow: precisa da mesma especificidade de .exp-content p, senão o
   parágrafo sobrescreve o overline e ele perde o dourado. */
.exp-content p.eyebrow { color: var(--c-gold-dk); }
.exp-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.exp-stats div { display: flex; flex-direction: column; }
.exp-stats strong { font-family: var(--font-serif); font-size: 2.6rem; color: var(--c-gold-dk); font-weight: 600; line-height: 1; }
.exp-stats span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted-dk); margin-top: .4rem; }

/* ============ 11. SERVIÇOS & COMODIDADES ============ */
/* Seção clara: quebra a sequência de blocos escuros do topo da página.
   O .eyebrow--dark do HTML já entrega --c-gold-dk sozinho — o override que
   forçava --c-gold existia só porque a seção era escura. */
.amenities { padding: 6rem 0; background: var(--c-cream); color: var(--c-text-dark); }
.amenities .section-head h2 { color: var(--c-text-dark); }
/* As linhas da grade eram verde-vivo translúcido: sobre creme davam 1.2:1 */
.amenities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(22,36,31,.16); border: 1px solid rgba(22,36,31,.16); }
.amenity { background: var(--c-cream); padding: 2rem 1.4rem; text-align: center; transition: background .4s; }
.amenity:hover { background: rgba(28,74,58,.09); }
.amenity-ic { width: 38px; height: 38px; fill: none; stroke: var(--c-gold-dk); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto .9rem; }
.amenity h3 { font-size: 1.25rem; margin-bottom: .4rem; color: var(--c-text-dark); }
.amenity p { color: var(--c-muted-dk); font-size: .85rem; }

/* ============ 12. DEPOIMENTOS (seção clara) ============ */
.testimonials { padding: 6rem 0; background: var(--c-cream); color: var(--c-text-dark); }
.testimonials .eyebrow { color: var(--c-gold-dk); }
.testimonials .section-head h2 { color: var(--c-text-dark); }
.rating-badge { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.2rem; font-size: .9rem; color: var(--c-muted-dk); }
.rating-badge .stars { color: var(--c-gold-dk); letter-spacing: .1em; }
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.testi-card { background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-leaf-br); padding: 2.2rem; border-radius: var(--radius); }
.testi-card .stars { color: var(--c-gold-dk); letter-spacing: .15em; margin-bottom: 1rem; }
.testi-card blockquote { font-family: var(--font-serif); font-size: 1.3rem; font-style: italic; line-height: 1.5; margin-bottom: 1.5rem; color: var(--c-text-dark); }
.testi-card figcaption strong { display: block; font-weight: 500; letter-spacing: .04em; color: var(--c-text-dark); }
.testi-card figcaption span { font-size: .82rem; color: var(--c-muted-dk); }

/* ============ 13. LOCALIZAÇÃO ============ */
.location { display: grid; grid-template-columns: 1fr; background: var(--c-base-alt); }
.loc-info { padding: 4rem 22px; }
.loc-info h2 { font-size: clamp(2rem, 6vw, 2.8rem); margin-bottom: 1rem; color: var(--c-cream); }
.loc-info > p { color: var(--c-muted); margin-bottom: 2rem; }
.loc-list { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 2rem; }
.loc-list li { display: flex; flex-direction: column; gap: .2rem; padding-left: 1.2rem; border-left: 2px solid var(--c-leaf-br); color: var(--c-muted); }
.loc-list strong { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; color: var(--c-gold); }
.loc-map { min-height: 360px; }
.loc-map iframe { width: 100%; height: 100%; min-height: 360px; }

/* ============ 14. CONVERSÃO (contato) ============ */
.contact { padding: 6rem 0; background: var(--c-base); color: var(--c-cream); }
/* minmax(0,1fr) e não 1fr: a trilha 1fr tem mínimo min-content, então o
   formulário empurrava a coluna para além do container e vazava no celular. */
.contact-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.contact-inner > * { min-width: 0; }
.contact-intro .eyebrow { color: var(--c-gold); }
.contact-intro h2 { font-size: clamp(1.8rem, 7.5vw, 2.9rem); margin-bottom: 1rem; }
.contact-intro > p { color: var(--c-muted); margin-bottom: 2rem; }
.contact-direct { display: flex; flex-direction: column; gap: 1rem; }
.contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: 1rem 1.2rem; border-radius: var(--radius); font-weight: 500; letter-spacing: .04em; transition: transform .3s, filter .3s; }
.contact-btn .ic { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
.contact-btn--wa { background: #25D366; color: #06351a; }
.contact-btn--tel { background: rgba(63,176,122,.12); color: var(--c-cream); border: 1px solid var(--c-line-dk); }
.contact-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* Mobile-first: uma coluna. Em duas, a largura intrínseca dos <input> somava
   mais que a tela e estourava a seção inteira para fora do container. */
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; background: var(--c-base-alt); border: 1px solid var(--c-line-dk); padding: 1.5rem; border-radius: var(--radius); }
.contact-form .field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.contact-form input, .contact-form textarea {
  background: rgba(63,176,122,.07); border: 1px solid var(--c-line-dk); color: var(--c-cream);
  padding: .85rem .9rem; font-family: var(--font-sans); font-size: .95rem; border-radius: var(--radius); resize: vertical;
  width: 100%; min-width: 0;   /* sem isto o input impõe seu tamanho padrão (~20 caracteres) */
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(201,214,206,.5); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--c-gold); }
.contact-form .btn { grid-column: 1 / -1; }
.contact-form .field.invalid input, .contact-form .field.invalid textarea { border-color: #E0685F; }
.form-feedback { grid-column: 1 / -1; text-align: center; font-size: .92rem; min-height: 1.2em; color: var(--c-gold); }

/* Painel de confirmação pós-envio */
.form-success { display: none; text-align: center; padding: 2.6rem 2rem; background: var(--c-base-alt); border: 1px solid var(--c-line-dk); border-radius: var(--radius); }
.form-success.show { display: block; }
.form-success .check { width: 60px; height: 60px; border-radius: 50%; background: var(--c-leaf-br); color: var(--c-text-dark); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 1.3rem; }
.form-success h3 { font-size: 1.9rem; color: var(--c-cream); margin-bottom: .6rem; }
.form-success p { color: var(--c-muted); margin-bottom: 1.7rem; }

/* ============ 15. FOOTER ============ */
.site-footer { background: #0A1915; color: var(--c-muted); padding-top: 4rem; border-top: 1px solid var(--c-line-dk); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; padding-bottom: 3rem; }
/* Assinatura do rodapé: mesmo lockup do header, em escala maior — aqui a
   marca fecha a página em vez de disputar espaço com a navegação. */
.footer-brand .brand { align-items: center; gap: 1.1rem; }
/* Lado a lado, símbolo e nome somam 309px na escala cheia — mais do que cabe
   num viewport de 320px. Os clamps encolhem o conjunto só nas telas estreitas
   e travam na escala cheia a partir de ~560px. */
.footer-brand .brand-logo { height: clamp(44px, 11vw, 56px); }
/* O filete entre símbolo e nome amarra as duas peças num conjunto só;
   sem ele, na escala do rodapé, elas leem como dois elementos soltos. */
.footer-brand .brand-text {
  padding-left: 1.1rem;
  border-left: 1px solid var(--c-line-dk);
}
/* "HOTEL" em dourado e bem espaçado: vira a linha de apoio da assinatura,
   e não uma palavra solta acima do nome. */
.footer-brand .brand-sub {
  display: flex; align-items: center; gap: .7rem;
  color: var(--c-gold); font-size: .6rem; letter-spacing: .5em;
  margin-bottom: .34rem; opacity: 1;
}
/* Filete fechando a linha de "HOTEL" na largura exata do nome abaixo.
   Justificar as 5 letras até lá pediria 4,2em de tracking — ilegível;
   o filete resolve o alinhamento das duas linhas sem esticar a palavra.
   O flex:1 se ajusta sozinho porque o span estica na largura do nome. */
.footer-brand .brand-sub::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(217,165,60,.5), rgba(217,165,60,0));
}
.footer-brand .brand-mark {
  color: var(--c-cream); font-size: clamp(1.18rem, 4.4vw, 1.55rem);
  font-weight: 500; letter-spacing: .16em;
}
.footer-brand .brand:hover .brand-mark { color: var(--c-white); }
.footer-about { margin: 1.4rem 0; font-size: .9rem; max-width: 320px; }
.footer-social { display: flex; gap: .8rem; }
.footer-social a { width: 40px; height: 40px; border: 1px solid var(--c-line-dk); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s; }
.footer-social a:hover { background: var(--c-gold); border-color: var(--c-gold); }
.footer-social a:hover svg { fill: var(--c-text-dark); }
.footer-social svg { width: 18px; height: 18px; fill: var(--c-cream); transition: fill .3s; }
.footer-col h4 { color: var(--c-cream); font-family: var(--font-sans); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col a, .footer-addr { display: block; font-size: .92rem; color: var(--c-muted); padding: .35rem 0; transition: color .3s; }
.footer-col a:hover { color: var(--c-gold); }
.footer-addr { opacity: .75; }
.footer-bottom { border-top: 1px solid var(--c-line-dk); padding: 1.6rem 0; }
.footer-bottom-inner { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; font-size: .82rem; }
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a:hover { color: var(--c-gold); }

/* ============ 16. WHATSAPP FLUTUANTE ============ */
/* ---- Atendimento flutuante: botão + painel ---- */
/* O 'right' de um elemento fixo se ancora na janela inteira, barra de rolagem
   inclusa — sem descontá-la o botão fica parcialmente atrás dela. --sb é a
   largura da barra, medida no JS. env() cobre o notch do iPhone. */
.fab {
  position: fixed; z-index: 900;
  right: calc(22px + var(--sb, 0px) + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: .8rem;
}
.fab-btn {
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 8px 28px rgba(37,211,102,.5);
  transition: transform .3s var(--ease), background .3s;
  animation: waPulse 2.6s infinite;
}
.fab-btn:hover { transform: scale(1.08); }
.fab-btn svg { width: 30px; height: 30px; fill: #fff; }
.fab-ic-x { display: none; color: #fff; font-size: 1.2rem; line-height: 1; }
/* Aberto: o botão vira "fechar" e para de pulsar */
.fab.is-open .fab-btn { background: var(--c-forest); animation: none; }
.fab.is-open .fab-ic-wa { display: none; }
.fab.is-open .fab-ic-x { display: block; }

.fab-panel {
  width: min(88vw, 300px); background: var(--c-cream); color: var(--c-text-dark);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: 0 22px 60px rgba(8,18,15,.45);
}
.fab-panel[hidden] { display: none; }
.fab-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.fab-title { font-family: var(--font-serif); font-size: 1.3rem; }
.fab-close { color: var(--c-muted-dk); font-size: 1rem; line-height: 1; padding: .2rem; }
.fab-close:hover { color: var(--c-text-dark); }
.fab-lead { font-size: .86rem; color: var(--c-muted-dk); margin-bottom: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fab-form { display: flex; flex-direction: column; gap: .55rem; }
.fab-form input {
  background: var(--c-white); border: 1px solid rgba(22,36,31,.30); color: var(--c-text-dark);
  padding: .7rem .8rem; font-family: var(--font-sans); font-size: .9rem; border-radius: var(--radius);
}
.fab-form input::placeholder { color: var(--c-muted-dk); }
.fab-form input:focus { border-color: var(--c-forest); outline: 2px solid var(--c-gold-dk); outline-offset: 1px; }
.fab-form input[aria-invalid="true"] { border-color: #B3261E; }
.fab-feedback { font-size: .82rem; min-height: 1.1em; text-align: center; color: var(--c-muted-dk); }

/* Botão único: valida, gera o lead e abre a conversa */
.fab-wa {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  margin-top: .35rem;
  background: #25D366; color: #06351a; padding: .85rem 1rem; border-radius: var(--radius);
  font-size: .84rem; font-weight: 500; transition: filter .3s;
}
.fab-wa:hover { filter: brightness(1.06); }
.fab-wa[disabled] { opacity: .6; cursor: default; }
.fab-wa svg { width: 18px; height: 18px; fill: #06351a; flex-shrink: 0; }

.whatsapp-float {
  position: fixed; bottom: 22px; right: 22px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(37,211,102,.5);
  transition: transform .3s var(--ease);
  animation: waPulse 2.6s infinite;
}
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }
.whatsapp-float:hover { transform: scale(1.1); }
@keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }

/* ============ 17. BANNER DE COOKIES (LGPD) ============ */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1200;
  background: rgba(14,33,28,.97);
  border-top: 1px solid rgba(217,165,60,.35);
  color: var(--c-muted);
  padding: 1.3rem 0;
  transform: translateY(100%);
  transition: transform .5s var(--ease);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.cookie-banner p { font-size: .88rem; max-width: 680px; }
.cookie-banner p a { color: var(--c-gold-lt); text-decoration: underline; }
.cookie-actions { display: flex; gap: .8rem; flex-shrink: 0; }
.cookie-btn { padding: .7rem 1.5rem; border-radius: var(--radius); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; transition: background .3s, border-color .3s, color .3s; }
.cookie-btn--accept { background: var(--c-gold); color: var(--c-text-dark); }
.cookie-btn--accept:hover { background: var(--c-gold-lt); }
.cookie-btn--reject { background: transparent; color: var(--c-muted); border: 1px solid var(--c-line-dk); }
.cookie-btn--reject:hover { border-color: var(--c-cream); color: var(--c-cream); }

/* Sobe o botão flutuante enquanto o banner está visível */
body.cookie-visible .whatsapp-float { bottom: 130px; }

/* ============ 18. ANIMAÇÕES (reveal) ============ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Respeita preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ 19. MEDIA QUERIES ============ */

/* --- Mosaico da galeria fora do desktop (até 959px) ---
   Em 2 colunas o desenho do desktop não cabe, e 28 fotos do mesmo tamanho
   viram uma grade sem hierarquia. Aqui o bloco é de 4 fotos e ocupa 4 linhas
   × 2 colunas (8 células): uma grande de largura cheia (2×2), uma faixa
   panorâmica (2×1) e duas pequenas — 4+2+1+1 = 8. Fecha exato e se repete a
   cada 4 fotos, então não sobra célula vazia em nenhum total múltiplo de 4.
   As posições 4n+1 e 4n+2 caem justamente nas fotos que no desktop são as
   grandes e as panorâmicas (paisagem), que são as que aguentam largura cheia.
   Precisa ser max-width: o span de linha vazaria para o mosaico do desktop. */
@media (max-width: 959.98px) {
  .gallery-grid { grid-auto-rows: 30vw; grid-auto-flow: row dense; }
  .gallery-item:nth-child(4n+1) { grid-column: span 2; grid-row: span 2; }  /* grande */
  .gallery-item:nth-child(4n+2) { grid-column: span 2; }                    /* faixa */
}

/* --- Tablet --- */
@media (min-width: 600px) {
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  /* Galeria: no tablet segue 2 colunas, só com a linha mais baixa */
  .gallery-grid { grid-auto-rows: 27.5vw; }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Duas colunas só quando há largura para elas — abaixo disto o formulário
     de contato fica empilhado (ver seção 14). */
  .contact-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 2rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom-inner { flex-direction: row; justify-content: space-between; }
}

/* --- Desktop --- */
@media (min-width: 960px) {
  .nav { display: flex; gap: 2.2rem; }
  .menu-toggle { display: none; }
  .hero-scroll { display: block; }

  .booking-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .booking-title, .booking-lead,
  .booking-feedback { text-align: left; }

  .highlights-grid { grid-template-columns: repeat(4, 1fr); }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }

  /* Mosaico em 4 colunas. O desenho é um bloco de 8 fotos que ocupa exatamente
     4 linhas × 4 colunas (16 células): 2 grandes (2×2), 2 panorâmicas (2×1) e
     4 pequenas — 4+4+8 = 16. Como o bloco fecha certo, ele se repete a cada 8
     fotos (:nth-child(8n+k)) e a galeria pode crescer sem buraco nenhum.
     O resto também fecha: as 4 primeiras posições do bloco (grande, panorâmica,
     pequena, pequena) preenchem 2 linhas cheias — por isso o total de fotos só
     precisa ser múltiplo de 4. Hoje são 28.
     'dense' garante que as pequenas caiam nos vãos que sobram à esquerda. */
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 19vw; grid-auto-flow: row dense; }
  .gallery-item:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }  /* grande */
  .gallery-item:nth-child(8n+2) { grid-column: span 2; }                    /* panorâmica */
  .gallery-item:nth-child(8n+5) { grid-column: span 2; }                    /* panorâmica */
  .gallery-item:nth-child(8n+6) { grid-column: span 2; grid-row: span 2; }  /* grande */
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
  .amenities-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

  .experience { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .exp-media { min-height: 100%; }
  .exp-content { padding: 6rem 5rem; margin: auto 0; }

  .location { grid-template-columns: 1fr 1.1fr; }
  .loc-info { padding: 6rem 5rem; margin: auto 0; }
  .loc-map { min-height: 560px; }

  .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}

/* --- Telas largas --- */
@media (min-width: 1280px) {
  .hero-title { font-size: 5.4rem; }
}