/* NOI — home: una pantalla, logo + iconos sobre las fotos de las dos salas */

@property --tint-a { syntax: "<color>"; inherits: true; initial-value: rgb(42 8 10 / 64%); }
@property --tint-b { syntax: "<color>"; inherits: true; initial-value: rgb(30 6 8 / 88%); }

.home {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: var(--crema);
  isolation: isolate;
  overflow: hidden;
  --tint-a: rgb(42 8 10 / 64%);
  --tint-b: rgb(30 6 8 / 88%);
  transition: --tint-a 1400ms var(--ease-out), --tint-b 1400ms var(--ease-out);
}
.home[data-set="verde"] { --tint-a: rgb(24 30 14 / 62%); --tint-b: rgb(16 20 9 / 88%); }
.home[data-set="rosso"] { --tint-a: rgb(80 14 16 / 60%); --tint-b: rgb(44 8 10 / 88%); }

.home__stage { position: fixed; z-index: -2; }

/* Velo: centro más oscuro para que el logo respire; cambia de color según la sala */
.home__tint {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 72% 64% at 50% 46%, var(--tint-b) 0%, var(--tint-a) 62%, rgb(20 6 6 / 50%) 100%);
}
/* Desenfoque suave solo en el centro, donde va el contenido; los bordes siguen nítidos */
.home__tint::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(5px) saturate(0.92);
  backdrop-filter: blur(5px) saturate(0.92);
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 47%, #000 35%, transparent 82%);
  mask-image: radial-gradient(ellipse 60% 56% at 50% 47%, #000 35%, transparent 82%);
}

.home__inner {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(3rem, 1rem + 6vh, 6rem);
  padding: clamp(4.5rem, 3rem + 6vh, 7rem) var(--gutter) clamp(5.5rem, 4rem + 6vh, 7.5rem);
  text-align: center;
}
.home__logo { margin: 0; font-weight: 400; }

/* Entrada escalonada (tras el loader o la cortina) */
.js .home__inner > * { opacity: 0; transform: translateY(1rem); transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out); }
.js .home.is-ready .home__inner > * { opacity: 1; transform: none; }
.js .home.is-ready .home__inner > :nth-child(2) { transition-delay: 180ms; }
.js .home.is-ready .home__inner > :nth-child(3) { transition-delay: 320ms; }
.js .home.is-ready .home__inner > :nth-child(4) { transition-delay: 440ms; }
.js .home.is-ready .home__inner > :nth-child(5) { transition-delay: 560ms; }
/* Portada: primero el logo (letras → brochazo → lema), luego el resto */
.js .page-home .home.is-ready .home__inner > :nth-child(2) { transition-delay: 1700ms; }
.js .page-home .home.is-ready .home__inner > :nth-child(3) { transition-delay: 2000ms; }
.js .page-home .home.is-ready .home__inner > :nth-child(4) { transition-delay: 2200ms; }
.js .home__caption { opacity: 0; transition: opacity 1400ms var(--ease-out) 900ms; }
.js .page-home .home__caption { transition-delay: 2600ms; }
.js .home.is-ready .home__caption { opacity: 1; }

/* ---------- Iconos ---------- */
.icons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 7rem));
  gap: 1.8rem clamp(0.8rem, 0.4rem + 2vw, 2.4rem);
  justify-content: center;
}
@media (min-width: 641px) { .icons { grid-template-columns: repeat(6, minmax(0, 7.5rem)); } }
.icon-link {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0.2rem 0.7rem;
  color: var(--crema);
  transition: color var(--dur) var(--ease-out);
}
.icon-link svg {
  width: clamp(2.3rem, 1.9rem + 1.3vw, 3.4rem);
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease-out);
}
.icon-link svg .fill { fill: currentColor; stroke: none; }
.icon-link span {
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.12rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
}
.icon-link::after {
  content: "";
  position: absolute; left: 30%; right: 30%; bottom: 0;
  height: 1px; background: var(--ottone);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.icon-link:hover, .icon-link:focus-visible { color: var(--ottone); }
.icon-link:hover svg, .icon-link:focus-visible svg { transform: translateY(-0.3rem); }
.icon-link:hover::after, .icon-link:focus-visible::after { transform: scaleX(1); }
.icon-link:active svg { transform: translateY(-0.1rem) scale(0.96); }
.icon-link:focus-visible { outline-offset: 0.4rem; }
/* Móvil (como Trèsde): una sola fila de iconos y todo más agrupado */
@media (max-width: 640px) {
  .icons { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 0.1rem; width: 100%; max-width: 24rem; }
  .icon-link { gap: 0.45rem; padding: 0.3rem 0 0.55rem; }
  .icon-link svg { width: 1.65rem; }
  .icon-link span { font-size: 0.66rem; letter-spacing: 0.01em; white-space: normal; line-height: 1.2; }
  .page-home .home__inner { gap: clamp(2.6rem, 7.5vh, 5.5rem); padding-top: 3.5rem; padding-bottom: 5.5rem; }
  .page-home .noi-logo--xl { width: 13.5rem; }
  .home__awards { gap: 1.4rem; }
  .home__award-name em { font-size: 1.08rem; }
  .home__awards-rule { height: 2.4rem; }
  .home__contact { font-size: 0.92rem; gap: 0.15rem; }
}

/* ---------- Premios ---------- */
.home__awards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
}
.home__awards li:not(.home__awards-rule) { display: grid; gap: 0.15rem; justify-items: center; }
.home__award-name { font-size: 1.15rem; line-height: 1.2; }
.home__award-name.spaced { letter-spacing: 0.32em; margin-right: -0.32em; font-size: 1rem; }
.home__award-name em { font-size: 1.3rem; }
.home__awards li span:last-child:not(.home__award-name) { font-size: 0.95rem; color: rgb(243 235 220 / 80%); }
.home__awards-rule { width: 1px; height: 3.2rem; background: rgb(243 235 220 / 35%); }

/* ---------- Contacto ---------- */
.home__contact {
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.1rem);
  color: rgb(243 235 220 / 88%);
}
@media (max-width: 640px) {
  .home__contact { flex-direction: column; align-items: center; }
  .home__contact > span { display: none; }
}

/* ---------- Pie: sala actual + contador ---------- */
.home__caption {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: rgb(243 235 220 / 85%);
}
.home__counter { display: inline-flex; align-items: center; gap: 0.5rem; }
.home__progress { position: relative; width: 4.5rem; height: 1px; margin-left: 0.6rem; background: rgb(243 235 220 / 30%); overflow: hidden; }
.home__progress span { position: absolute; inset: 0; background: var(--crema); transform-origin: left; transform: scaleX(0); }
.home__progress span.is-running { transform: scaleX(1); transition: transform var(--stage-interval, 5600ms) linear; }
@media (max-width: 640px) { .home__caption { font-size: 0.62rem; letter-spacing: 0.2em; } }

/* ---------- Páginas de una pantalla (Propuesta 1): Ristorante, Bar e Cucina, Regala ---------- */
.solo .home__inner {
  gap: clamp(1.3rem, 0.8rem + 2.2vh, 2.4rem);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 3vh, 3.5rem));
  max-width: 54rem;
}
.solo__eyebrow { color: var(--ottone); }
.theme-rosso .solo__eyebrow { color: #f0b48c; }
.solo__title { font-size: clamp(3.2rem, 1.8rem + 6vw, 8.5rem); font-weight: 300; line-height: 0.9; margin: 0; }
.solo__title small {
  display: block;
  font-size: 0.2em;
  letter-spacing: 0.6em;
  margin-right: -0.6em;
  margin-bottom: 0.7em;
  font-weight: 400;
}
.theme-verde .solo__title { letter-spacing: 0.05em; }
.solo__text { max-width: 38rem; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); color: rgb(243 235 220 / 88%); }
.solo__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.solo__next { display: inline-flex; align-items: center; gap: 0.6rem; }
.solo__next svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease-out); }
.solo__next:hover svg { transform: translateX(0.3rem); }
.solo__note { color: rgb(243 235 220 / 70%); font-size: var(--text-small); }
.solo .placeholder-note { color: var(--crema); }


@media (max-width: 640px) { .page-home .home__caption { display: none; } }

/* Pantalla completa en móvil: la foto llega a los bordes (también bajo la barra de Safari)
   y el fondo de la página es el tono oscuro del borde de la foto, no un marco granate */
.home__stage, .home__tint { inset: 0 0 auto 0; height: 100vh; height: 100lvh; }
body:has(> .home) { background: #1b1110; }
body.theme-verde:has(> .home) { background: #161a0e; }
body.theme-rosso:has(> .home) { background: #2a0a0c; }

/* Propuesta 2: sin el icono de Reservar; 5 iconos centrados (3 arriba + 2 abajo en móvil) */
.icons-2rows .icon-link--reserve { display: none; }
.icons-2rows .icons { display: flex; flex-wrap: wrap; justify-content: center; }
.icons-2rows .icon-link { width: 7.5rem; }
@media (max-width: 640px) {
  .icons-2rows .icons { gap: 1.2rem 0; max-width: 22rem; }
  .icons-2rows .icon-link { width: 33.333%; gap: 0.55rem; }
  .icons-2rows .icon-link svg { width: 2.05rem; }
  .icons-2rows .icon-link span { font-size: 0.82rem; white-space: nowrap; }
  .icons-2rows.page-home .home__inner { gap: clamp(2.4rem, 7vh, 5rem); padding-top: 3rem; }
  .icons-2rows.page-home .noi-logo--xl { width: 12.5rem; }
}
}

/* ---------- Ristorante / Bar e Cucina (sencilla): un poco más al hacer scroll ---------- */
.solo .home__caption { align-items: flex-end; }
.solo__scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgb(243 235 220 / 85%);
}
.solo__scroll::after { height: 1.8rem; }
.solo-more { position: relative; z-index: 1; background: var(--bg); color: var(--fg); }
.solo-cta {
  padding: var(--space-section) var(--gutter);
  display: grid; justify-items: center; gap: 2rem;
  text-align: center;
}
.solo-cta__title { font-size: var(--text-h2); font-weight: 300; line-height: 0.95; }
.solo-cta__title em { font-style: italic; color: var(--accent); }
@media (max-width: 640px) { .solo .home__caption > span:first-child { display: none; } }