/* ==============================================================
   home.css
   Punto Neto v2.6
   Ruta: public/assets/css/home.css
   Creado: 2026-06-30
   Modificado: 2026-07-14
   Descripcion: Estilos exclusivos de la vista Home (hero carrusel,
                banners de promocion rotables, grid de categorias
                con imagen completa, seccion institucional).
                v2.0 reconstruyo estructura completa contra la
                maqueta aprobada; v2.1 cambio promos a banner
                completo; v2.2 fallback de icono generico en
                categorias; v2.4 rediseño de categorias a imagen
                completa + barra superpuesta (fiel a la maqueta,
                antes era circulo chico con mucho espacio vacio);
                v2.5 cambia promos de grid estatico de 2 a sistema
                de paginas rotables con fade (soporta cualquier
                cantidad de banners activos en zona=horizontal).
                v2.6 agrega el layout de la seccion "Ofertas del
                día" (titulo, countdown, grid contenedor) — la card
                en si (.producto-card y derivados) NO vive aqui,
                vive en producto-card.css, compartida con
                catalogo.php.
   Depende de:    public/assets/css/base.css (variables --color-*,
                  --sp-*, --radio-*, --sombra-*, --trans-* generadas
                  por Tema::cssVars(), cargar ANTES),
                  public/assets/css/producto-card.css (estilos de
                  la card usada dentro de .ofertas-dia-grid — cargar
                  junto con este, ambos via $pagina_css de home.php)
   Requerido por: src/Views/storefront/home.php (via $pagina_css
                  en index.php)
   ============================================================== */

/* ---------------- Hero (carrusel) ---------------- */
.hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--color-secundario);
}

.hero-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide--roto .hero-slide-img { display: none; }
.hero-slide--roto { background: var(--color-superficie-alt); }
.hero-slide::after {
  /* degradado para legibilidad del texto sobre la foto */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-secundario) 8%,
    rgba(13,13,13,.75) 32%,
    rgba(13,13,13,.15) 60%,
    transparent 80%
  );
}

.hero-contenido {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--texto-sobre-secundario);
}
.hero-titulo {
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 900;
  line-height: 1.02;
  max-width: 480px;
  text-transform: uppercase;
}
.hero-sub {
  font-size: 14px;
  max-width: 340px;
  opacity: .9;
  line-height: 1.5;
}
.hero-cta {
  width: fit-content;
  margin-top: var(--sp-2);
}

.hero-dots {
  position: absolute;
  z-index: 3;
  left: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  gap: 6px;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  padding: 0;
  cursor: pointer;
}
.hero-dot--activo { background: var(--color-primario); width: 20px; border-radius: var(--radio-pill); }


/* ---------------- Promos destacadas (banners zona=horizontal) ----------------
   v2.1: se dejaron de tratar como card estructurada (titulo/precio/boton
   como campos HTML separados) y pasaron a banner completo — el archivo
   de imagen ya trae el texto y precio "horneados" por el disenador via
   Canva/Photoshop. Decision: los assets reales ya subidos venian
   disenados asi, y el admin de negocio solo sube un archivo sin
   necesitar tocar campos de texto separados.
   El precio que se ve aqui es marketing/visual — el cobro real siempre
   se calcula server-side en carrito/checkout, nunca desde esta imagen. */
.promos { padding: var(--sp-8) 0; position: relative; }

/* v2.5: de grid estatico a sistema de "paginas" rotables — permite
   cualquier cantidad de banners activos en zona=horizontal, no solo
   2 fijos. Cada pagina tiene hasta 2 banners, se superponen y
   alternan visibilidad con fade (ver home.js). Con 1 sola pagina
   (2 banners o menos) no hay rotacion, se ve igual que antes. */
.promos-track {
  position: relative;
}
.promos-pagina {
  display: none;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.promos-pagina--activa {
  display: grid;
  animation: promos-fade-in 500ms ease;
}
@keyframes promos-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.promos-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-4);
}
.promos-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-borde);
  border: none;
  padding: 0;
  cursor: pointer;
}
.promos-dot--activo { background: var(--color-primario); width: 20px; border-radius: var(--radio-pill); }

.promo-card {
  display: block;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  transition: transform var(--trans-rapida);
  aspect-ratio: 720 / 400; /* caja fija pedida — mas cercana a la
    proporcion real de los banners de El Barrio Burger que el 760:220
    original (zona 'horizontal' generica), evita el recorte de texto
    que se vio antes */
}
.promo-card:hover { transform: translateY(-2px); }

/* v2.3: de vuelta a object-fit:cover (no contain) — la caja 720:400
   ya es realista respecto a las imagenes reales, asi que cover se
   ve bien: si la imagen es mas chica que la caja, crece hasta cubrir
   todo el espacio; si ya viene en esa proporcion, solo se ajusta sin
   recortar. Centrada siempre. */
.promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Imagen rota/faltante — placeholder silencioso en vez del icono roto
   + alt text flotando que se vio con foto_tienda_url faltante */
.promo-card--roto .promo-img { display: none; }
.promo-card--roto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-superficie-alt);
  color: var(--color-texto-suave);
  font-size: 12px;
}
.promo-card--roto::after { content: 'Banner no disponible'; }

/* ---------------- Ofertas del día (escaparate del motor de precios) ----------------
   La card en si (.producto-card, badge, imagen, precio, boton) vive
   en producto-card.css — aqui solo el layout de la seccion:
   encabezado con countdown, y el grid contenedor. Mismo criterio
   visual de titulo que .menu-cats-titulo (linea + texto + linea). */
.ofertas-dia { padding: var(--sp-8) 0 var(--sp-4); }

.ofertas-dia-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.ofertas-dia-titulo {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.ofertas-dia-titulo .linea {
  width: 40px; height: 2px;
  background: var(--color-primario);
  display: inline-block;
}

.ofertas-dia-countdown {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-superficie-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  padding: var(--sp-1) var(--sp-4);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-texto-suave);
}
.ofertas-dia-countdown .icono { font-size: 16px; color: var(--color-primario); }
.ofertas-dia-countdown #ofertas-countdown-texto {
  color: var(--color-texto);
  font-variant-numeric: tabular-nums; /* evita que el ancho salte cada segundo */
}

.ofertas-dia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mismo criterio mobile-first
    que .productos-grid de catalogo.css — fijo en 2 en movil */
  gap: var(--sp-4);
}

/* ---------------- Nuestro menu (categorias) ---------------- */
.menu-cats { padding: var(--sp-8) 0 var(--sp-4); }
.menu-cats-titulo {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.menu-cats-titulo .linea {
  width: 40px; height: 2px;
  background: var(--color-primario);
  display: inline-block;
}

.cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* v2.4: rediseño completo — la version anterior era circulo chico
   + nombre debajo, con mucho espacio vacio sin aprovechar. La
   maqueta usa la tarjeta COMPLETA como imagen (aprovecha el
   espacio real), con una barra superior semitransparente que
   lleva icono + nombre superpuestos sobre la foto. */
.cat-card {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  aspect-ratio: 4 / 3;
  transition: transform var(--trans-rapida);
}
.cat-card:hover { transform: translateY(-2px); }

.cat-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cat-etiqueta {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(to bottom, rgba(0,0,0,.75) 20%, transparent 100%);
}
.cat-icono {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-primario);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: var(--texto-sobre-primario);
  font-size: 15px;
}
.cat-icono::after {
  font-family: 'Material Symbols Rounded';
  content: 'restaurant';
}
.cat-nombre {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* categoria sin imagen representativa (ni de producto real ni
   categorias.imagen_url) — fondo solido con el icono centrado
   en grande, en vez de foto */
.cat-card--sin-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-card--sin-imagen .cat-imagen { display: none; }
.cat-card--sin-imagen .cat-etiqueta {
  position: static;
  background: none;
  flex-direction: column;
  text-align: center;
}
.cat-card--sin-imagen .cat-icono {
  width: 48px; height: 48px;
  font-size: 24px;
  background: var(--color-superficie-alt);
  color: var(--color-primario);
}
.cat-card--sin-imagen .cat-nombre {
  color: var(--color-texto);
  text-shadow: none;
}

/* ---------------- Institucional ---------------- */
.institucional { padding: var(--sp-10) 0; }
.institucional-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.institucional-titulo {
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.institucional-titulo span { color: var(--color-primario); }
.institucional-texto p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-texto-suave);
  margin-bottom: var(--sp-3);
}

.institucional-visual { position: relative; min-height: 280px; }
.institucional-foto {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radio-lg);
  display: block;
}
.institucional-foto--vacia,
.institucional-foto--rota {
  background: var(--color-superficie-alt);
}
.institucional-foto--rota { color: transparent; }
.institucional-sello {
  position: absolute;
  z-index: 2;
  top: -18px;
  left: -18px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--color-primario);
  color: var(--texto-sobre-primario);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.3;
  padding: var(--sp-3);
  box-shadow: var(--sombra-3);
}

/* ---------------- Breakpoints ---------------- */
@media (min-width: 768px) {
  .promos-pagina { grid-template-columns: repeat(2, 1fr); }
  .ofertas-dia-grid { grid-template-columns: repeat(4, 1fr); }
  .cats-grid { grid-template-columns: repeat(5, 1fr); }
  .institucional-grid { grid-template-columns: 1.1fr 0.9fr; }
}
@media (min-width: 1024px) {
  .hero { height: 500px; }
}