/* =====================================================================
   CELTIC — ESTILOS DE LA PORTADA (landing)
   ---------------------------------------------------------------------
   El banner del inicio es la imagen panorámica de la marca (con el logo),
   fija, sin animaciones.
   ===================================================================== */

/* ---------- BANNER (hero) ---------- */
.hero {
  position: relative;
  min-height: 28vh;   /* banner compacto: el humo se recorta libre, el logo va encima */
  background-color: #060606;
  background-image: url('../img/banner-fondo.jpg'); /* solo el humo (sin el logo) */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El logo, como pieza aparte, centrado y a tamaño prolijo (nunca se corta) */
.hero__logo {
  position: relative;
  z-index: 2;
  height: clamp(130px, 23vh, 200px);   /* tamaño prolijo y parejo en todas las pantallas */
  width: auto;
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, 0.45));
}

/* ---------- BANDA DE BIENVENIDA (debajo del banner) ---------- */
.bienvenida {
  background-color: var(--color-principal);
  color: var(--color-texto-claro);
  text-align: center;
  padding: var(--espacio-4) var(--espacio-3);   /* franja más baja */
}
.bienvenida__frase {
  font-family: var(--fuente-titulos);
  font-size: clamp(1rem, 2.3vw, 1.4rem);        /* tipografía más chica */
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--color-texto-claro);
  max-width: 720px;
  margin: 0 auto;
}
.bienvenida__frase span { color: var(--color-secundario); }

/* ---------- SECCIÓN DE ACCESO A LOS 4 MENÚS ---------- */
/* En el inicio, el pie va justo debajo de las fotos (sin franja clarita extra). */
.acceso-menus { padding-top: var(--espacio-2); padding-bottom: 0; }

/* ---------- BARRA DE NOVEDADES (texto que se desplaza, discreto) ---------- */
.noticias {
  background-color: var(--color-fondo);   /* pergamino, igual que el fondo */
  overflow: hidden;
  min-height: 38px;                       /* alto de la franja (como antes) */
  display: flex;
  align-items: center;                    /* centra verticalmente el texto */
}
.noticias__marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
/* El texto arranca fuera del borde derecho (padding-left:100%) y se desliza
   hasta salir por completo por la izquierda; después reaparece por la derecha. */
.noticias__texto {
  display: inline-block;
  position: relative;
  top: -1.5px;                            /* Cinzel deja la letra algo baja: la subimos para centrarla */
  padding-left: 100%;
  line-height: 1;                         /* caja de texto ajustada, para que quede centrada */
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  color: var(--color-principal);
  animation: noticiasMarquee 24s linear infinite;
}
@keyframes noticiasMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/* Accesibilidad: si pidió "menos movimiento", queda fijo y centrado. */
@media (prefers-reduced-motion: reduce) {
  .noticias__texto { animation: none; padding-left: 0; display: block; text-align: center; }
}
.acceso-menus__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--espacio-5);
}

/* En celular el banner puede ser un poco más bajo */
@media (max-width: 640px) {
  .hero { min-height: 34vh; }
}

/* =====================================================================
   VITRINA DE PRODUCTOS (carrusel del inicio)
   ---------------------------------------------------------------------
   Muestra 3 fotos a la vez (2 en tablet, 1 en celular) que se deslizan
   solas hacia la izquierda, de a una, cada 3 segundos, en bucle.
   El título "Productos" queda fijo abajo, centrado sobre la foto de la
   izquierda. Todo el bloque es un acceso a la página de Productos.
   ===================================================================== */
.vitrina {
  display: block;
  position: relative;
  text-decoration: none;
}
.vitrina__ventana {
  overflow: hidden;
  width: 100%;
}
.vitrina__track {
  display: flex;
  will-change: transform;
}
.vitrina__item {
  flex: 0 0 auto;              /* el ancho lo pone inicio.js (1/3, 1/2 o 1/1) */
  /* Las fotos crecen con el alto de la pantalla para llenar la vista inicial
     (sin dejar espacio vacío abajo) y sin pasarse en monitores muy altos. */
  height: clamp(260px, calc(72vh - 118px), 620px);
  background-size: cover;
  background-position: center;
  background-color: var(--color-principal);
}
/* Título fijo, centrado sobre la foto de la izquierda de las 3 visibles */
.vitrina__titulo {
  position: absolute;
  bottom: clamp(16px, 2.4vw, 30px);
  left: 16.6667%;             /* centro de la 1ª de 3 */
  transform: translateX(-50%);
  color: var(--color-texto-claro);   /* crema claro de la marca, no blanco puro */
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 900px) {
  .vitrina__titulo { left: 25%; }    /* centro de la 1ª de 2 */
}
@media (max-width: 600px) {
  .vitrina__titulo { left: 50%; }    /* centro de la única visible */
}
@media (prefers-reduced-motion: reduce) {
  .vitrina__track { transition: none !important; }
}