/* ─────────────────────────────────────────────
   HUTO · main.css
   Estilos do index.html (homepage do grupo)
   ───────────────────────────────────────────── */

#conceito, #unidades, #galeria, #reservas {
  scroll-margin-top: 80px;
}

/* ── HERO ── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.38) saturate(.72);
  animation: kz 11s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  transform-origin: center 55%;
  will-change: transform;
}
@keyframes kz {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .ticker-track { animation-play-state: paused; }
}
.hero-grad {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(12,10,7,.08) 0%, rgba(12,10,7,.52) 100%),
    linear-gradient(to bottom, rgba(12,10,7,.72) 0%, rgba(12,10,7,.18) 28%, rgba(12,10,7,.18) 68%, rgba(12,10,7,.82) 100%);
}
.hero-kanji {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-japanese);
  font-size: clamp(16rem, 42vh, 32rem);
  color: rgba(245,237,224,.04);
  line-height: 1;
  letter-spacing: .04em;
  writing-mode: vertical-rl;
  pointer-events: none;
  user-select: none;
}
.hero-body {
  position: relative;
  padding: 0 72px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-tag {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ember);
  letter-spacing: .38em;
  margin-bottom: 18px;
  opacity: 0;
  animation: up .85s cubic-bezier(0.16,1,0.3,1) .1s forwards;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 15vw, 14rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(245,237,224,.96);
  line-height: .9;
  text-transform: uppercase;
  opacity: 0;
  animation: up .95s cubic-bezier(0.16,1,0.3,1) .28s forwards;
}
.hero-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-size: clamp(.75rem, 1.2vw, 1rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,237,224,.6);
  font-family: var(--font-display);
  font-weight: 400;
  margin-top: 16px;
}
.hs-jp {
  font-family: var(--font-japanese);
  letter-spacing: .1em;
  color: rgba(158,114,32,.68);
  line-height: 1;
}
.hs-dot { color: var(--ember); font-family: var(--font-japanese); }
.hs-en {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(158,114,32,.68);
  line-height: 1;
}
.hero-desc {
  margin-top: 32px;
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(245,237,224,.58);
  max-width: 480px;
  line-height: 1.85;
  opacity: 0;
  animation: up .85s cubic-bezier(0.16,1,0.3,1) .52s forwards;
}
.hero-acts {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  justify-content: center;
  opacity: 0;
  animation: up .85s cubic-bezier(0.16,1,0.3,1) .72s forwards;
}
.hero-body .btn-o {
  border-color: rgba(245,237,224,.38);
  color: rgba(245,237,224,.78);
}
.hero-body .btn-o:hover {
  border-color: rgba(245,237,224,.85);
  color: rgba(245,237,224,1);
}
.hero-scrl {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: up .85s cubic-bezier(0.16,1,0.3,1) 1.3s forwards;
}
.hero-scrl span {
  font-family: var(--font-japanese);
  font-size: .6rem;
  color: rgba(245,237,224,.36);
  letter-spacing: .22em;
}
.scrl-bar {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, rgba(158,114,32,.8), transparent);
  animation: drop 2s 2s infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ── TICKER ── */
.ticker {
  background: rgba(158,114,32,.1);
  border-top: 1px solid rgba(158,114,32,.24);
  border-bottom: 1px solid rgba(158,114,32,.24);
  overflow: hidden;
  padding: 14px 0;
  user-select: none;
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  animation: ticker-roll 44s linear infinite;
}
.t-en {
  font-family: var(--font-display);
  font-size: .46rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(245,237,224,.82);
}
.t-jp {
  font-family: var(--font-japanese);
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(158,114,32,1);
}
.t-dot {
  font-family: var(--font-body);
  font-size: .5rem;
  color: rgba(158,114,32,.88);
  flex-shrink: 0;
}
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── MANIFESTO / CONCEITO DO GRUPO ── */
.manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}
.mf-img {
  position: relative;
  overflow: hidden;
  background: #1a1610;
}
.mf-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.88);
  transition: transform .9s cubic-bezier(0.25,0.46,0.45,0.94), filter .9s;
}
.mf-img:hover img { transform: scale(1.04); filter: brightness(.95) saturate(1); }
.mf-img-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 52%, var(--char) 100%);
}
.mf-txt {
  background: var(--char);
  padding: 96px 80px 96px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mf-txt::before {
  content: '風土';
  position: absolute;
  bottom: -28px; right: 24px;
  font-family: var(--font-japanese);
  font-size: clamp(9rem, 14vw, 17rem);
  color: rgba(245,237,224,.034);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.mf-txt .lbl  { color: rgba(158,114,32,.88); }
.mf-txt .heading { color: rgba(245,237,224,.92); }
.mf-txt .heading-i { color: rgba(245,237,224,.7); }
.mf-txt .rule { background: var(--ember); }
.mf-txt .body-text { color: rgba(245,237,224,.5); }
.mf-txt .body-text strong { color: rgba(245,237,224,.75); }
.mf-attr {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(245,237,224,.08);
  font-family: var(--font-japanese);
  font-size: .6rem;
  letter-spacing: .22em;
  color: rgba(245,237,224,.32);
  line-height: 1.6;
}
.mf-attr strong {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,237,224,.5);
}
.mf-attr .ga-jp { color: rgba(158,114,32,.72); }

/* ── UNIDADES (cards 2×2) ── */
.unidades {
  background: var(--char);
  padding: 96px max(72px, calc(50% - 720px));
}
.un-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 52px;
}
.un-hd .lbl { color: rgba(158,114,32,.88); margin-bottom: 0; }
.un-hd .heading { color: rgba(245,237,224,.92); }
.un-hd .heading-i { color: rgba(245,237,224,.68); }
.un-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.un-card {
  position: relative;
  overflow: hidden;
  height: 520px;
  display: block;
  text-decoration: none;
  cursor: pointer;
  background: #1a1610;
}
.un-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.6) saturate(.75);
  transition: transform .9s cubic-bezier(0.25,0.46,0.45,0.94),
              filter .9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.un-card:hover img {
  transform: scale(1.06);
  filter: brightness(.75) saturate(.9);
}
.un-card-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,10,7,.92) 0%, rgba(12,10,7,.4) 50%, rgba(12,10,7,.15) 100%);
  transition: background .6s;
}
.un-card:hover .un-card-ov {
  background: linear-gradient(to top, rgba(12,10,7,.88) 0%, rgba(12,10,7,.28) 60%, rgba(12,10,7,.08) 100%);
}
.un-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 44px;
  transform: translateY(0);
  transition: transform .55s cubic-bezier(0.16,1,0.3,1);
}
.un-card:hover .un-card-body { transform: translateY(-8px); }
.un-tag {
  font-family: var(--font-japanese);
  font-size: .62rem;
  letter-spacing: .28em;
  color: var(--ember);
  margin-bottom: 10px;
  display: block;
}
.un-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,237,224,.94);
  line-height: 1.05;
}
.un-name-jp {
  display: block;
  font-family: var(--font-japanese);
  font-size: .9rem;
  letter-spacing: .08em;
  color: rgba(158,114,32,.7);
  margin-top: 6px;
}
.un-location {
  font-family: var(--font-japanese);
  font-size: .6rem;
  letter-spacing: .22em;
  color: rgba(245,237,224,.38);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.un-location::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--ember);
  flex-shrink: 0;
}
.un-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(245,237,224,.52);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .38s, transform .38s, color .28s;
}
.un-card:hover .un-cta { opacity: 1; transform: translateY(0); }
.un-cta:hover { color: var(--ember); }
.un-cta svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s;
}
.un-card:hover .un-cta svg { transform: translateX(3px); }

/* ── GALERIA MOSAICO ── */
.galeria {
  background: #1a1510;
  padding: 96px max(72px, calc(50% - 720px));
}
.gal-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}
.gal-hd .lbl { color: rgba(158,114,32,.88); margin-bottom: 0; }
.gal-hd .heading { color: rgba(245,237,224,.92); }
.gal-hd .heading-i { color: rgba(245,237,224,.68); }
.gal-hint {
  font-family: var(--font-japanese);
  font-size: .56rem;
  letter-spacing: .22em;
  color: rgba(245,237,224,.25);
  padding-bottom: 6px;
}
.gtrack {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: repeat(4, 260px);
  gap: 3px;
  user-select: none;
}
.gitem {
  overflow: hidden;
  position: relative;
  background: #1a1610;
}
.gitem img {
  height: 100%; width: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  pointer-events: none;
  transition: filter .75s cubic-bezier(0.25,0.46,0.45,0.94),
              transform .75s cubic-bezier(0.25,0.46,0.45,0.94);
  filter: brightness(.88) saturate(.8);
}
.gitem:hover img { filter: brightness(1.04) saturate(1.05); transform: scale(1.05); }
.gitem-lbl {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 44px 14px 12px;
  background: linear-gradient(to top, rgba(12,10,7,.68) 0%, transparent 100%);
  font-family: var(--font-japanese);
  font-size: .56rem;
  letter-spacing: .26em;
  color: rgba(245,237,224,.75);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.gitem:hover .gitem-lbl { opacity: 1; transform: none; }

/* bento grid */
.gitem:nth-child(1) { grid-column: 1/3; grid-row: 1; }
.gitem:nth-child(2) { grid-column: 3;   grid-row: 1; }
.gitem:nth-child(3) { grid-column: 1;   grid-row: 2; }
.gitem:nth-child(4) { grid-column: 2/4; grid-row: 2; }
.gitem:nth-child(5) { grid-column: 1/3; grid-row: 3; }
.gitem:nth-child(6) { grid-column: 3;   grid-row: 3; }
.gitem:nth-child(7) { grid-column: 1;   grid-row: 4; }
.gitem:nth-child(8) { grid-column: 2;   grid-row: 4; }
.gitem:nth-child(9) { grid-column: 3;   grid-row: 4; }

/* ── QUOTE / DIVISA ── */
.divisa {
  position: relative;
  height: 52vh;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px max(72px, calc(50% - 680px));
  overflow: hidden;
}
.divisa-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: brightness(.2) saturate(.35);
}
@media (hover:hover) and (pointer:fine) { .divisa-bg { background-attachment: fixed; } }
.divisa-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(12,10,7,.65) 0%, rgba(12,10,7,.32) 50%, rgba(12,10,7,.65) 100%);
}
.divisa-c { position: relative; }
.divisa-pre {
  font-family: var(--font-japanese);
  font-size: .62rem;
  color: var(--ember);
  letter-spacing: .3em;
  margin-bottom: 20px;
}
.divisa-txt {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  color: rgba(245,237,224,.86);
  max-width: 700px;
  line-height: 1.65;
  font-weight: 300;
}
.divisa-kj {
  position: absolute;
  right: 6%;
  bottom: -10%;
  font-family: var(--font-japanese);
  font-size: clamp(10rem, 22vw, 24rem);
  color: rgba(158,114,32,.12);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ── RESERVAS ── */
.reservas {
  background: var(--char);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.res-info {
  background: var(--char);
  padding: 96px 64px 96px max(72px, calc(50vw - 720px));
  border-right: 1px solid rgba(245,237,224,.06);
}
.res-info .lbl { color: rgba(158,114,32,.88); }
.res-info .heading { color: rgba(245,237,224,.92); }
.res-info .heading-i { color: rgba(245,237,224,.7); }
.res-info .rule { background: var(--ember); }
.res-info .body-text { color: rgba(245,237,224,.5); }
.res-form {
  background: #131007;
  padding: 96px max(72px, calc(50vw - 720px)) 96px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(245,237,224,.06);
}
.getin-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 360px;
  width: 100%;
}
.getin-jp {
  font-family: var(--font-japanese);
  font-size: 5rem;
  color: var(--ember);
  opacity: .22;
  line-height: 1;
}
.getin-head {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: rgba(245,237,224,.95);
  text-transform: uppercase;
}
.getin-txt {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .95rem;
  color: rgba(245,237,224,.58);
  line-height: 1.75;
}
.getin-btn { width: 100%; text-align: center; }
.res-form .btn-f {
  background: transparent;
  border: 1px solid rgba(158,114,32,.6);
  color: rgba(245,237,224,.82);
  box-shadow: none;
  border-radius: 999px;
  width: 100%;
}
.res-form .btn-f:hover {
  background: rgba(158,114,32,.14);
  border-color: var(--ember);
  color: rgba(245,237,224,.95);
  box-shadow: 0 8px 28px rgba(158,114,32,.16);
  transform: translateY(-3px);
}

/* ── FOOTER ── */
/* footer + mbar → base.css */

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hero-body  { padding: 0 28px; }
  .hero-kanji { display: none; }

  .manifesto { grid-template-columns: 1fr; }
  .mf-img    { height: 400px; }
  .mf-txt    { padding: 60px 28px; }

  .unidades  { padding: 72px 28px; }
  .un-hd     { flex-direction: column; align-items: flex-start; gap: 12px; }
  .un-grid   { grid-template-columns: 1fr; }
  .un-card   { height: 440px; }

  .galeria   { padding: 72px 28px; }
  .gal-hd    { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gal-hint  { display: none; }
  .gtrack {
    display: flex; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; cursor: grab;
  }
  .gtrack::-webkit-scrollbar { display: none; }
  .gtrack:active { cursor: grabbing; }
  .gitem { flex: 0 0 auto; height: 340px; grid-column: auto; grid-row: auto; }
  .gitem:nth-child(1) { width: 280px; }
  .gitem:nth-child(2) { width: 200px; }
  .gitem:nth-child(3) { width: 300px; }
  .gitem:nth-child(4) { width: 400px; }
  .gitem:nth-child(5) { width: 260px; }
  .gitem:nth-child(6) { width: 220px; }
  .gitem:nth-child(7) { width: 200px; }
  .gitem:nth-child(8) { width: 290px; }
  .gitem:nth-child(9) { width: 250px; }

  .divisa   { padding: 60px 28px; }
  .divisa-kj { display: none; }

  .reservas { grid-template-columns: 1fr; }
  .res-info { padding: 72px 28px; border-right: none; border-bottom: 1px solid rgba(245,237,224,.06); }
  .res-form { padding: 60px 28px; }

}

@media (max-width: 640px) {
  .hero { min-height: 100svh; }
  .hero-body { padding: 0 24px; }
  .hero-title { font-size: clamp(3.5rem, 18vw, 5.5rem); letter-spacing: .1em; }
  .hero-sub   { font-size: clamp(.68rem, 3vw, .9rem); margin-top: 10px; }
  .hero-acts  { flex-direction: column; width: 100%; max-width: 300px; }
  .hero-acts .btn { text-align: center; width: 100%; }

  .un-card   { height: 380px; }
  .un-card-body { padding: 28px 28px; }

  .gtrack {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 4px;
    overflow: visible;
    cursor: default;
  }
  .gitem,
  .gitem:nth-child(n) { width: auto !important; height: auto !important; aspect-ratio: 4/5; grid-column: auto; grid-row: auto; }
  .gitem:nth-child(1),
  .gitem:nth-child(4),
  .gitem:nth-child(7) { grid-column: 1/-1; aspect-ratio: 16/9; }

  .divisa { height: auto; min-height: 0; padding: 52px 24px; }
  .res-info { padding: 56px 20px; }
  .res-form  { padding: 48px 20px; }
}