/* SALVIA BLANCA — home v2.
   Toma el ACOMODO de elementos del template Grand Restaurant (demo3 Luxury):
   barra superior de contacto, hero inmersivo con serif centrada, secciones
   partidas mitad-texto/mitad-foto, banda parallax y galería.
   Pero con la marca de Salvia: tipografías y colores propios (tokens.css).
   Sin Revolution Slider (de pago y pesado): hero estático.
   Los PLATILLOS NO van aquí — viven en las páginas de menú. */

/* ── Barra superior de contacto ── */
.topbar {
  background: var(--sb-tinta);
  color: var(--sb-lino);
  font-family: var(--font-cuerpo);
  font-size: var(--txt-xs);
  letter-spacing: 0.04em;
}
.topbar-in {
  max-width: var(--ancho-ancho);
  margin: 0 auto;
  padding: var(--sp-2) var(--canal);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.topbar-in .sep {
  margin-left: auto;
}
.topbar a {
  color: var(--sb-lino);
}
.topbar a:hover {
  color: var(--sb-ambar);
}

/* ── Nav sobre el hero (transparente, como el template) ── */
.nav2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--canal);
  max-width: var(--ancho-ancho);
  margin: 0 auto;
}
.nav2 .logo img {
  height: 62px;
  width: auto;
}
.nav2 nav {
  margin-left: auto;
  display: flex;
  gap: var(--sp-8);
  align-items: center;
}
.nav2 nav a {
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-medio);
  font-size: var(--txt-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sb-hueso);
  transition: color var(--dur-rapido) var(--ease);
}
.nav2 nav a:hover {
  color: var(--sb-ambar);
}
/* Botón de reserva "outline", el gesto del template */
.btn-outline {
  border: 1px solid var(--sb-hueso);
  color: var(--sb-hueso);
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-medio);
  font-size: var(--txt-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  transition: background var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease);
}
.btn-outline:hover {
  background: var(--sb-hueso);
  color: var(--color-texto);
}

/* ── Hero inmersivo, texto CENTRADO (como el domo del demo3) ── */
.hero2 {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.hero2-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 55%;
}
.hero2-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 26, 23, 0.5), rgba(28, 26, 23, 0.25) 40%, rgba(28, 26, 23, 0.7));
}
.hero2-in {
  position: relative;
  z-index: 2;
  padding: var(--sp-24) var(--canal);
  max-width: 1000px;
}
.hero2 h1 {
  font-family: var(--font-titulo);
  font-weight: var(--peso-normal);
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--sb-hueso);
  margin: 0;
}
/* Filete fino arriba y abajo del título — el gesto del template */
.hero2 h1::before,
.hero2 h1::after {
  content: '';
  display: block;
  width: min(360px, 60%);
  height: 1px;
  background: rgba(248, 244, 236, 0.45);
  margin: var(--sp-8) auto;
}
.hero2-sub {
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-ligero);
  font-size: var(--txt-md);
  letter-spacing: 0.06em;
  color: rgba(248, 244, 236, 0.9);
  margin: 0 auto var(--sp-8);
  max-width: 52ch;
}
.hero2-cta {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Encabezado de sección centrado (script + título) ── */
.sec-head2 {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto var(--sp-12);
}
.sec-kicker {
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: var(--txt-lg);
  color: var(--color-realce);
  display: block;
  margin-bottom: var(--sp-1);
}
.sec-head2 h2 {
  font-family: var(--font-titulo);
  font-weight: var(--peso-normal);
  font-size: var(--txt-xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
.sec-head2 p {
  color: var(--color-texto-suave);
}

/* ── Sección partida: mitad texto / mitad foto ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 520px;
}
.split.invertido .split-txt {
  order: 2;
}
.split-txt {
  display: grid;
  align-content: center;
  padding: clamp(var(--sp-12), 6vw, var(--sp-32));
  background: var(--sb-hueso);
}
.split-txt h2 {
  font-family: var(--font-titulo);
  font-weight: var(--peso-normal);
  font-size: var(--txt-xl);
  margin: 0 0 var(--sp-4);
}
.split-txt p {
  color: var(--color-texto-suave);
  margin-bottom: var(--sp-4);
  max-width: 46ch;
}
.split-img {
  background-size: cover;
  background-position: center;
  min-height: 380px;
}
/* En chef-tona el chef está en la ORILLA DERECHA de la foto: con
   background-position:center el recorte a media pantalla lo dejaba fuera y
   sólo se veía el edificio. Enfocamos a la derecha para que siempre salga. */
.split-img.foco-der {
  background-position: 78% center;
}

/* ── Banda parallax con cita ── */
.banda {
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  padding: clamp(var(--sp-24), 14vh, var(--sp-32)) var(--canal);
  text-align: center;
}
.banda::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 23, 0.62);
}
.banda-in {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}
.banda blockquote {
  font-family: var(--font-titulo);
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  line-height: 1.4;
  color: var(--sb-hueso);
  margin: 0;
}
.banda cite {
  display: block;
  margin-top: var(--sp-6);
  font-family: var(--font-cuerpo);
  font-style: normal;
  font-size: var(--txt-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sb-ambar);
}

/* ── Galería en rejilla ── */
.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.galeria a {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  display: block;
}
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lento) var(--ease);
}
.galeria a:hover img {
  transform: scale(1.06);
}

/* ── Bloque de sección con fondo claro/blanco ── */
.bloque {
  padding: clamp(var(--sp-16), 9vh, var(--sp-32)) var(--canal);
}
.bloque.blanco {
  background: var(--sb-blanco);
}
.bloque-in {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
}

/* ── Pilares en 4 columnas ── */
.pilares2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  text-align: center;
}
.pilar2 h3 {
  font-family: var(--font-titulo);
  font-weight: var(--peso-normal);
  font-size: var(--txt-lg);
  margin: var(--sp-3) 0 var(--sp-2);
}
.pilar2 p {
  font-size: var(--txt-sm);
  color: var(--color-texto-suave);
}
.pilar2 .num {
  font-family: var(--font-titulo);
  font-style: italic;
  color: var(--color-realce);
  font-size: var(--txt-md);
}

/* ── Bandas verticales con foto de fondo (mismo patrón que radiantte.mx) ──
   Escritorio: acordeón horizontal — al pasar el mouse la banda se expande y
   revela su texto. Móvil: se apilan y muestran todo. */
.bandas {
  display: flex;
  min-height: 78vh;
}
.banda-v {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: grid;
  align-content: end;
  padding: var(--sp-8) var(--sp-6);
  color: var(--sb-hueso);
  text-decoration: none;
  transition: flex var(--dur-lento) var(--ease);
  border-right: 1px solid rgba(248, 244, 236, 0.15);
}
.banda-v:last-child {
  border-right: 0;
}
.banda-v::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: var(--foto);
  transition: transform var(--dur-lento) var(--ease);
}
.banda-v::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 26, 23, 0.85) 0%, rgba(28, 26, 23, 0.35) 45%, rgba(28, 26, 23, 0.15) 100%);
}
.banda-v > * {
  position: relative;
  z-index: 2;
}
.banda-v .bv-num {
  font-family: var(--font-titulo);
  font-style: italic;
  color: var(--sb-ambar);
  font-size: var(--txt-sm);
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-2);
}
.banda-v h3 {
  font-family: var(--font-titulo);
  font-weight: var(--peso-normal);
  font-size: var(--txt-lg);
  margin: 0;
  color: var(--sb-hueso);
}
/* La descripción sólo aparece al expandir (escritorio) */
.banda-v .bv-desc {
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-ligero);
  font-size: var(--txt-sm);
  color: rgba(248, 244, 236, 0.9);
  max-width: 34ch;
  margin-top: var(--sp-3);
  opacity: 0;
  max-height: 0;
  transition: opacity var(--dur-medio) var(--ease), max-height var(--dur-lento) var(--ease);
}
@media (hover: hover) and (min-width: 901px) {
  .banda-v:hover,
  .banda-v:focus-visible {
    flex: 2.4;
  }
  .banda-v:hover::before,
  .banda-v:focus-visible::before {
    transform: scale(1.06);
  }
  .banda-v:hover .bv-desc,
  .banda-v:focus-visible .bv-desc {
    opacity: 1;
    max-height: 12em;
  }
}
/* Sin hover (móvil/táctil) se ve todo, sin acordeón */
@media (max-width: 900px), (hover: none) {
  .bandas {
    flex-direction: column;
    min-height: 0;
  }
  .banda-v {
    min-height: 300px;
    border-right: 0;
    border-bottom: 1px solid rgba(248, 244, 236, 0.15);
  }
  .banda-v .bv-desc {
    opacity: 1;
    max-height: none;
  }
}

/* ── Reconocimientos y afiliaciones ── */
.recon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}
.recon-item {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: var(--sb-hueso);
}
.recon-item .r-ico {
  font-size: var(--txt-lg);
  color: var(--color-realce);
  display: block;
  margin-bottom: var(--sp-3);
}
.recon-item h3 {
  font-family: var(--font-titulo);
  font-weight: var(--peso-normal);
  font-size: var(--txt-md);
  margin: 0 0 var(--sp-2);
}
.recon-item p {
  font-size: var(--txt-sm);
  color: var(--color-texto-suave);
  margin: 0;
}
.afiliados {
  text-align: center;
  border-top: 1px solid var(--color-borde);
  padding-top: var(--sp-8);
}
.afiliados h3 {
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-medio);
  font-size: var(--txt-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  margin: 0 0 var(--sp-5);
}
.afiliados ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) var(--sp-10);
}
.afiliados li {
  font-family: var(--font-titulo);
  font-size: var(--txt-md);
  color: var(--color-texto-suave);
}

/* ── Footer real (4 columnas + barra inferior) ── */
.pie {
  background: var(--sb-lino);
  color: var(--color-texto);
  padding-top: clamp(var(--sp-16), 9vh, var(--sp-24));
  border-top: 1px solid rgba(28, 26, 23, 0.08);
}
.pie-in {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--canal);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--sp-12);
}
.pie-marca img {
  width: 130px;
  margin-bottom: var(--sp-5);
}
.pie-marca p {
  font-size: var(--txt-sm);
  color: var(--color-texto-suave);
  max-width: 34ch;
}
.pie h3 {
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-medio);
  font-size: var(--txt-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-realce);
  margin: 0 0 var(--sp-4);
}
.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie li {
  margin-bottom: var(--sp-2);
}
.pie a,
.pie address,
.pie p {
  font-size: var(--txt-sm);
  color: var(--color-texto-suave);
  font-style: normal;
  line-height: 1.7;
}
.pie a {
  transition: color var(--dur-rapido) var(--ease);
}
.pie a:hover {
  color: var(--color-acento);
}
.pie-horario {
  margin: var(--sp-4) 0;
}
.pie-horario em {
  color: var(--color-realce);
  font-style: italic;
}

.pie-bajo {
  margin-top: clamp(var(--sp-12), 6vh, var(--sp-16));
  border-top: 1px solid rgba(28, 26, 23, 0.1);
  padding: var(--sp-6) 0;
}
.pie-bajo-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.pie-bajo p {
  font-size: var(--txt-xs);
  color: var(--color-texto-tenue);
  margin: 0;
}
.pie-social {
  display: flex;
  gap: var(--sp-5);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .split,
  .galeria {
    grid-template-columns: 1fr;
  }
  .split.invertido .split-txt {
    order: 0;
  }
  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
  .pilares2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav2 nav {
    display: none;
  }
  .banda {
    background-attachment: scroll;
  }
  .pie-in {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }
  .pie-bajo-in {
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 520px) {
  .pilares2,
  .pie-in {
    grid-template-columns: 1fr;
  }
}

/* ── Ubicación: mapa a media anchura + foto tarde→noche ──
   La foto de noche se superpone a la de tarde y aparece al pasar el cursor.
   Sin hover (móvil/táctil) se queda la de tarde: no se pierde nada. */
.ubicacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.ubi-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--sb-piedra-texto);
  min-height: 420px;
}
.ubi-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ubi-noche {
  opacity: 0;
  transition: opacity var(--dur-lento) var(--ease-suave);
}
.ubi-foto figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--sp-12) var(--sp-8) var(--sp-6);
  font-family: var(--font-cuerpo);
  font-size: var(--txt-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent);
}
.ubi-mapa {
  width: 100%;
  min-height: 420px;
  border: 0;
  display: block;
  filter: saturate(0.9);
}

@media (hover: hover) {
  .ubi-foto:hover .ubi-noche { opacity: 1; }
}
/* Quien pidió menos movimiento no necesita el crossfade */
@media (prefers-reduced-motion: reduce) {
  .ubi-noche { transition: none; }
}

@media (max-width: 900px) {
  .ubicacion { grid-template-columns: 1fr; }
  .ubi-foto { min-height: 300px; }
  .ubi-mapa { min-height: 340px; }
}

/* ── Música en vivo (movida desde /menu/) ──
   FONDO POR TEMPORADA: en frío se toca dentro, en calor afuera. Hoy está la
   de interior (salón lleno, marzo 2025). Para la temporada de calor, cambiar
   esta url por la de exterior cuando el cliente la mande. */
.musica {
  position: relative;
  margin-top: var(--sp-16);
  padding: var(--sp-24) var(--canal);
  text-align: center;
  color: #fff;
  background-image: linear-gradient(rgb(28 26 23 / 0.62), rgb(28 26 23 / 0.62)),
    url('/img/fotos/musica/interior-lleno.webp');
  background-size: cover;
  background-position: center;
}
.musica-in {
  max-width: 560px;
  margin: 0 auto;
}
.musica h3 {
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: var(--sp-2) 0 var(--sp-4);
}
.musica p {
  color: rgb(255 255 255 / 0.88);
  margin: 0 0 var(--sp-4);
}
.musica .sec-kicker {
  color: var(--sb-arena, #E4DDD0);
}
.musica-dato {
  font-family: var(--font-cuerpo);
  font-size: var(--txt-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.7) !important;
  margin-bottom: var(--sp-8) !important;
}

/* Tira de tres fotos bajo el bloque de texto. La de en medio es vertical y
   se levanta un poco, para que no sea una fila plana de rectángulos. */
.musica-tira {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  max-width: 900px;
  margin: var(--sp-12) auto 0;
}
.musica-tira img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.musica-tira img:first-child {
  height: 240px;
  margin-top: -20px;
}
@media (max-width: 700px) {
  .musica-tira { gap: var(--sp-2); }
  .musica-tira img { height: 110px; }
  .musica-tira img:first-child { height: 130px; margin-top: -10px; }
}

/* ── Franja del evento en curso ── */
.franja-evento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  padding: 12px var(--canal);
  background: #E4674F;
  color: #fff;
  font-family: var(--font-cuerpo);
  font-size: var(--txt-sm);
  text-decoration: none;
  text-align: center;
  transition: background var(--dur-medio) var(--ease-suave);
}
.franja-evento:hover,
.franja-evento:focus-visible {
  background: #C34F39;
}
.fe-fecha {
  font-weight: var(--peso-medio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--txt-xs);
  padding: 4px 12px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
}
.fe-texto { opacity: 0.95; }
.fe-mas {
  font-weight: var(--peso-medio);
  border-bottom: 1px solid currentColor;
}
@media (max-width: 700px) {
  .fe-texto { font-size: var(--txt-xs); }
}

/* ─────────────────────────────────────────────────────────────
   CONTRASTE TIPOGRÁFICO
   Dos familias que se complementan en vez de competir:
   · Instrument Serif  — alta, de mucho contraste. Voz y emoción.
   · brandon-grotesque — geométrica y neutra. Información y orden.
   La gracia está en que cada una haga SÓLO lo suyo, y en usar la
   cursiva de la serif como acento, no como decoración constante.
   ───────────────────────────────────────────────────────────── */

/* La palabra clave del titular en cursiva: da un punto donde descansar
   la vista en vez de un bloque parejo. */
.hero2 h1 {
  /* Ancho en "ch" para que el titular parta solo en dos líneas parejas,
     sin <br> forzado: con el salto a mano una palabra quedaba huérfana y
     en móvil se rompía peor. */
  max-width: 17ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.hero2 h1 em {
  font-style: italic;
  /* La cursiva de esta serif es más estrecha; un pelo más de tamaño la
     iguala ópticamente con la redonda. */
  font-size: 1.06em;
}

/* El subtítulo del hero: sans muy espaciada y pequeña contra la serif
   enorme. El contraste de ESCALA es lo que hace el efecto, no el peso. */
.hero2-sub {
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-ligero);
  font-size: var(--txt-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Rótulos de sección: la cursiva de la serif ya estaba; se le baja el peso
   visual con un tamaño menor para que el H2 mande. */
.sec-kicker {
  font-size: var(--txt-md);
  letter-spacing: 0.01em;
}

/* Los números de las bandas en serif, no en sans: son cifras editoriales,
   no datos. */
.bv-num {
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: var(--txt-lg);
  letter-spacing: 0;
}

/* Párrafos: la sans en su peso ligero y con más aire entre líneas. Cuando
   el Light (300) entre al kit de Adobe, esto se afina solo. */
.split-txt p,
.ml-intro p,
.bloque-in > p {
  font-weight: var(--peso-ligero);
  line-height: 1.85;
}

/* Las bandas ahora son enlaces a la página de cada pilar */
a.banda-v {
  text-decoration: none;
  color: inherit;
}
a.banda-v:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: -4px;
}