/* =========================================================
   HOJA DE ESTILOS — style.css
   =========================================================
   Buscá el título de la sección que querés modificar.
   Todo el archivo está ordenado de arriba hacia abajo tal
   como aparece la página: encabezado, buscador, sliders,
   categorías, productos, más vendidos, promos, carrito,
   info del local, footer y por último los ajustes responsive.
   ========================================================= */


/* =========================================================
   VARIABLES GENERALES — COLORES
   =========================================================
   Cambiá acá los colores generales del sitio. Se usan en
   todas las secciones automáticamente. */

:root {
  --color-principal: #FF3E7F;     /* rosa fiesta: botones destacados, precios, acentos */
  --color-secundario: #7C3AED;    /* violeta: títulos destacados, detalles */
  --color-fondo: #FFFBF5;         /* fondo general del sitio */
  --color-fondo-tarjeta: #FFFFFF; /* fondo de tarjetas de producto */
  --color-texto: #241F3D;         /* color de texto principal */
  --color-texto-suave: #6B6580;   /* color de texto secundario / descripciones */
  --color-botones: #FF3E7F;       /* color de fondo de botones principales */
  --color-botones-texto: #FFFFFF; /* color del texto de los botones */
  --color-oferta: #FF5A36;        /* color para precios de oferta / promos */
  --color-borde: #F0EAF7;         /* color de bordes suaves / separadores */
  --color-agotado: #B9B4C3;       /* color para productos sin stock */
  --color-whatsapp: #25D366;      /* color del ícono/botón de WhatsApp */
  --color-lavanda: #F4EEFF;       /* fondo suave de los bloques de navegación (categorías / subcategorías) */
  --color-lavanda-borde: #E2D5FA; /* borde de tarjetas de categoría y pills de subcategoría */
  --color-violeta-oscuro: #3F2390;/* textos sobre lavanda (títulos de navegación, pills) */

  /* ---- TIPOGRAFÍAS ----
     Cambiá acá las tipografías generales del sitio.
     Si cambiás la fuente, actualizá también el <link> de
     Google Fonts en el <head> de index.html. */
  --fuente-titulos: 'Baloo 2', system-ui, sans-serif;
  --fuente-textos: 'Work Sans', system-ui, sans-serif;

  /* ---- MEDIDAS GENERALES ---- */
  --radio-borde: 18px;
  --radio-borde-chico: 10px;
  --sombra-tarjeta: 0 4px 16px rgba(36, 31, 61, 0.08);
  --ancho-maximo: 1280px;          /* ancho máximo del contenido (mismo valor en todas las pantallas) */
  --padding-lateral: 16px;         /* margen lateral en mobile/tablet */
  --padding-lateral-desktop: 32px; /* margen lateral en escritorio (ver RESPONSIVE) */
}


/* =========================================================
   BASE / RESET
   ========================================================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-textos);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 78px; /* deja lugar para el botón flotante de carrito en celular */
  overflow-x: clip;     /* ningún carrusel puede generar scroll horizontal de toda la página */
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  margin: 0 0 8px 0;
  color: var(--color-texto);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--fuente-textos); cursor: pointer; border: none; }

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 16px;
}

.seccion-titulo {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 18px auto 8px auto;
  padding: 0 16px;
  max-width: var(--ancho-maximo);
}

/* botón genérico reutilizado en toda la web */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-botones);
  color: var(--color-botones-texto);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.96); }
.btn-secundario {
  background: var(--color-fondo-tarjeta);
  color: var(--color-secundario);
  border: 2px solid var(--color-secundario);
}
.btn-bloque { width: 100%; }

/* al saltar a una sección (categoría, "Ver todo", sliders) el encabezado
   fijo no tapa el título de destino */
section[id] { scroll-margin-top: 76px; }

/* foco visible al navegar con teclado en los bloques clickeables nuevos */
.slider-item:focus-visible,
.campania-caja:focus-visible,
.mini-card:focus-visible,
.home-seccion-ver-todo:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}
.btn:disabled { background: var(--color-agotado); color: #fff; opacity: 0.8; cursor: not-allowed; }


/* =========================================================
   IMAGEN DE FONDO GENERAL
   =========================================================
   Si querés usar una imagen de fondo detrás de todo el sitio
   (en vez de un color liso), descomentá estas líneas y
   asegurate de tener la imagen en la ruta indicada en
   CONFIG.imagenFondo (ver js/data.js). */

/*
body {
  background-image: url('../img/fondo.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
*/


/* =========================================================
   ENCABEZADO (LOGO, NOMBRE, BUSCADOR, CARRITO)
   ========================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-fondo-tarjeta);
  box-shadow: 0 2px 10px rgba(36, 31, 61, 0.06);
}

.header-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* permite que el bloque se achique en vez de empujar al buscador */
  max-width: 45%; /* tope duro: el nombre del negocio nunca puede comerse todo el ancho */
  flex-shrink: 1;
  overflow: hidden;
}
.header-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0; /* el logo circular nunca se deforma */
}
.header-logo span {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  color: var(--color-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* si el nombre del negocio no entra, se corta con "..." en vez de tapar el buscador */
  min-width: 0;
}

.header-carrito-btn {
  position: relative;
  background: var(--color-fondo);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.header-carrito-cantidad {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-principal);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* botón flotante de carrito (solo celular, ver sección responsive) */
.carrito-flotante {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 60;
  background: var(--color-principal);
  color: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255, 62, 127, 0.4);
}
.carrito-flotante .header-carrito-cantidad {
  position: static;
  background: #fff;
  color: var(--color-principal);
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.buscador-wrap {
  flex: 1;
  min-width: 0; /* clave: sin esto el input no se achica y empuja al carrito fuera de pantalla */
  position: relative;
}
.buscador-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 11px 14px 11px 38px;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  background: var(--color-fondo);
  font-size: 0.95rem;
  color: var(--color-texto);
}
.buscador-input:focus { outline: 2px solid var(--color-secundario); }
.buscador-icono {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

.buscador-resultados {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-fondo-tarjeta);
  border-radius: var(--radio-borde-chico);
  box-shadow: var(--sombra-tarjeta);
  max-height: 60vh;
  overflow-y: auto;
  display: none;
  z-index: 80;
}
.buscador-resultados.activo { display: block; }
.buscador-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-borde);
}
.buscador-item:last-child { border-bottom: none; }
.buscador-item img {
  width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
}
.buscador-item-info { flex: 1; min-width: 0; }
.buscador-item-nombre { font-size: 0.9rem; font-weight: 600; }
.buscador-item-ruta { font-size: 0.75rem; color: var(--color-texto-suave); }
.buscador-vacio { padding: 16px; text-align: center; color: var(--color-texto-suave); font-size: 0.9rem; }


/* =========================================================
   SLIDERS PRINCIPALES
   ========================================================= */

.sliders {
  padding: 10px 16px 0 16px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
}

.slider-track-wrap {
  position: relative;
}

.slider-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }

/* Cada slide es un link (todo el banner es clickeable, ver renderSliders).
   En todas las pantallas el texto va SOBRE la imagen, con un degradado
   oscuro abajo: así en celular el banner ocupa mucho menos alto y se ve
   más contenido al entrar. */
.slider-item {
  position: relative;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;            /* celular: un poco más alto que la foto, se recorta a los costados */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: var(--radio-borde);
  overflow: hidden;
  background: #1E1030;
  box-shadow: var(--sombra-tarjeta);
  color: #fff;
}
.slider-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slider-texto {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 14px 14px 14px;
  background: linear-gradient(0deg, rgba(20,10,35,0.88) 0%, rgba(20,10,35,0.55) 55%, rgba(20,10,35,0) 100%);
  color: #fff;
}
.slider-texto h2 {
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.15;
  margin: 0 0 8px 0;
  max-width: 30ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* la descripción se muestra desde tablet (en celular sería demasiado texto sobre la foto) */
.slider-texto p { display: none; margin: 0 0 12px 0; font-size: 0.9rem; color: #fff; opacity: 0.92; max-width: 52ch; }
.slider-texto .btn { padding: 8px 16px; font-size: 0.85rem; }

@media (min-width: 640px) {
  .slider-item { aspect-ratio: 2 / 1; }
  .slider-texto { padding: 60px 22px 20px 22px; }
  .slider-texto h2 { font-size: 1.45rem; }
  .slider-texto p { display: block; }
  .slider-texto .btn { padding: 10px 20px; font-size: 0.92rem; }
}

/* flechas para cambiar de slider en computadora (con mouse) */
.slider-flecha {
  display: none; /* se muestran solo en pantallas de escritorio, ver RESPONSIVE */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--color-texto);
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 2px 8px rgba(36,31,61,0.2);
  z-index: 5;
}
.slider-flecha-izq { left: 12px; }
.slider-flecha-der { right: 12px; }

/* puntitos indicadores de qué slider se está viendo */
.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0 0;
}
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-borde);
  padding: 0;
}
.slider-dot.activo {
  background: var(--color-secundario);
  width: 20px;
  border-radius: 999px;
}


/* =========================================================
   CAMPAÑA ESTACIONAL
   =========================================================
   Bloque destacado y opcional (ver CAMPANIAS en js/data.js).
   Usa su propio color de fondo (colorFondo de la campaña),
   sin tocar la paleta general del sitio. Si no hay ninguna
   campaña activa, js/app.js deja #campania-wrap vacío y esta
   sección no ocupa espacio en la página. */

/* Bloque compacto: texto a la izquierda y la foto a la derecha,
   fundida con el color de fondo. Todo el bloque es un link a la
   categoría de la campaña (ver renderCampania en app.js).
   --campania-fondo y --campania-acento vienen de las columnas
   colorFondo y colorAcento de campanias.csv. */
.campania {
  max-width: var(--ancho-maximo);
  margin: 12px auto 0 auto;
  padding: 0 16px;
}
.campania-caja {
  --campania-fondo: #2A1240;
  --campania-acento: #FF7A1A;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 132px;
  border-radius: var(--radio-borde);
  overflow: hidden;
  background: var(--campania-fondo);
  color: #fff;
  box-shadow: var(--sombra-tarjeta);
}
.campania-texto {
  position: relative;
  z-index: 2;
  width: 64%;
  padding: 16px 0 16px 18px;
}
.campania-texto h2 {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.05;
  margin: 0 0 4px 0;
}
.campania-texto p {
  margin: 0 0 10px 0;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.9;
}
.campania-texto .btn {
  background: var(--campania-acento);
  color: #fff;
  padding: 8px 16px;
  font-size: 0.85rem;
}
.campania-imagen {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 46%;
  z-index: 1;
}
.campania-imagen img { width: 100%; height: 100%; object-fit: cover; }
/* degradado que funde la foto con el color de la campaña */
.campania-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--campania-fondo) 0%, transparent 55%);
}

@media (min-width: 640px) {
  .campania-caja { min-height: 150px; }
  .campania-texto { width: 58%; padding: 20px 0 20px 28px; }
  .campania-texto h2 { font-size: 1.7rem; }
  .campania-texto p { font-size: 0.92rem; }
  .campania-imagen { width: 50%; }
}

@media (min-width: 1024px) {
  .campania { padding-left: var(--padding-lateral-desktop); padding-right: var(--padding-lateral-desktop); }
}


/* =========================================================
   CATEGORÍAS
   =========================================================
   Bloque propio de navegación: caja lavanda con bordes
   redondeados y cada categoría como una mini tarjeta blanca.
   La categoría elegida lleva la clase "activo" (la pone
   seleccionarCategoria en app.js): borde violeta y fondo
   lavanda. En celular se desliza en horizontal y se ven
   unas 3,5 tarjetas para que se note que hay más. */

.categorias {
  max-width: var(--ancho-maximo);
  margin: 20px auto 0 auto;
  padding: 0 16px;
}
.categorias-caja {
  background: var(--color-lavanda);
  border-radius: 20px;
  padding: 14px 0 14px 0;
  overflow: hidden;
}
.categorias-caja .categorias-titulo {
  font-size: 1.25rem;
  color: var(--color-violeta-oscuro);
  margin: 0 0 10px 0;
  padding: 0 14px;
  max-width: none;
}
.categorias-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 14px 4px 14px;
  margin: 0;
  scroll-snap-type: x proximity;
  scroll-padding-left: 14px;
  scrollbar-width: none;
}
.categorias-track::-webkit-scrollbar { display: none; }

.categoria-item {
  flex: 0 0 88px;
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 9px 4px;
  text-align: center;
  background: var(--color-fondo-tarjeta);
  border: 1.5px solid var(--color-lavanda-borde);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(63, 35, 144, 0.06);
  color: var(--color-texto);
  scroll-snap-align: start;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.categoria-item.activo {
  background: #EFE6FF;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 1px var(--color-secundario);  /* refuerza el borde sin mover el contenido */
}
.categoria-item:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}
.categoria-icono {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  /* el color de fondo de cada categoría se aplica en línea desde JS,
     usando el campo "color" de cada categoría en data.js */
  color: #fff;
  overflow: hidden; /* recorta la imagen al círculo cuando "icono" es una foto */
}
/* cuando "icono" es una ruta de imagen (ver iconoEsImagen en app.js),
   la foto ocupa todo el círculo sin deformarse */
.categoria-icono-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.categoria-nombre {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 2.4em;              /* 2 renglones: todas las tarjetas quedan de la misma altura */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.categoria-item.activo .categoria-nombre {
  font-weight: 700;
  color: var(--color-violeta-oscuro);
}


/* =========================================================
   CATEGORÍA ELEGIDA + SUBCATEGORÍAS
   =========================================================
   Cabecera de la lista de productos: una tarjeta blanca con el
   nombre de la categoría como título grande y, pegada debajo,
   una franja lavanda con "Elegí una subcategoría" y los pills.
   Así se lee: Categoría → Subcategorías → Productos.
   Si la categoría no tiene subcategorías, la franja no aparece
   (app.js oculta #subcategorias-wrap, igual que antes). */

.productos-cabecera {
  width: calc(100% - 32px);
  max-width: calc(var(--ancho-maximo) - 32px);
  margin: 26px auto 14px auto;
  background: var(--color-fondo-tarjeta);
  border: 1.5px solid var(--color-lavanda-borde);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(63, 35, 144, 0.06);
  overflow: hidden;
}
.productos-cabecera .productos-titulo {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  padding: 16px 16px 12px 16px;
  max-width: none;
}

.subcategorias-franja {
  background: var(--color-lavanda);
  border-top: 1px solid var(--color-lavanda-borde);
  padding: 10px 0 12px 0;
}
.subcategorias-ayuda {
  margin: 0 0 8px 0;
  padding: 0 16px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

.subcategorias-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 2px 16px;
  margin: 0;
  scrollbar-width: none;
}
.subcategorias-track::-webkit-scrollbar { display: none; }

.subcategoria-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--color-fondo-tarjeta);
  border: 1.5px solid #D4C2F5;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-violeta-oscuro);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.subcategoria-chip.activo {
  background: var(--color-secundario);
  border-color: var(--color-secundario);
  color: #fff;
}
.subcategoria-chip:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}


/* =========================================================
   GRILLA DE PRODUCTOS Y TARJETA DE PRODUCTO
   ========================================================= */

.productos-grilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 4px 16px 16px 16px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
}

.tarjeta-producto {
  background: var(--color-fondo-tarjeta);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tarjeta-producto-imagen {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-borde);
  overflow: hidden;
}
.tarjeta-producto-imagen img {
  width: 100%; height: 100%; object-fit: cover;
}
.etiqueta-mas-vendido,
.etiqueta-agotado,
.etiqueta-oferta {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
}
.etiqueta-mas-vendido { background: var(--color-secundario); }
.etiqueta-oferta { background: var(--color-oferta); }
.etiqueta-agotado {
  left: auto; right: 8px; top: 8px;
  background: var(--color-agotado);
}

.tarjeta-producto-body {
  padding: 10px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.tarjeta-producto-nombre { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.tarjeta-producto-desc {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* la descripción completa (dentro del modal) nunca se recorta */
.modal-descripcion {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.ver-mas-link {
  align-self: flex-start;
  background: none;
  padding: 0;
  color: var(--color-secundario);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: underline;
}

.precio-fila { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.precio-actual { font-size: 1.05rem; font-weight: 700; color: var(--color-principal); }
.precio-anterior { font-size: 0.8rem; color: var(--color-texto-suave); text-decoration: line-through; }
.precio-consultar { font-size: 0.92rem; font-weight: 700; color: var(--color-secundario); }


/* =========================================================
   VARIANTES (color, tamaño, etc.)
   ========================================================= */

.variante-grupo { margin-top: 4px; }
.variante-grupo-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.variante-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.variante-opcion {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--color-borde);
  background: var(--color-fondo);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-texto);
}
.variante-opcion.seleccionada {
  background: var(--color-principal);
  border-color: var(--color-principal);
  color: #fff;
}

/* selector compacto (menú desplegable) — reemplaza a los chips en celular,
   ver breakpoint más abajo en RESPONSIVE */
.variante-select {
  display: none;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--color-borde);
  background: var(--color-fondo);
  font-family: var(--fuente-textos);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto);
  -webkit-appearance: none;
  appearance: none;
}

/* carrusel visual con miniatura, para variantes con imágenes cargadas
   (ver imagenesVariantes en catalogo.csv) — por ejemplo "Combo de globos" */
.variante-visual-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px 2px;
  scrollbar-width: none;
}
.variante-visual-track::-webkit-scrollbar { display: none; }
.variante-visual-opcion {
  flex: 0 0 auto;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  padding: 3px;
  border-radius: var(--radio-borde-chico);
  border: 2px solid transparent;
}
.variante-visual-imagen {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-borde);
}
.variante-visual-imagen img { width: 100%; height: 100%; object-fit: cover; }
.variante-visual-nombre {
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.variante-visual-opcion.seleccionada {
  border-color: var(--color-principal);
  background: rgba(255, 62, 127, 0.06);
}
.variante-visual-opcion.seleccionada .variante-visual-nombre { color: var(--color-principal); }

/* en celular, las variantes comunes (sin imagen) se muestran como un
   selector compacto en vez de chips, para no alargar las tarjetas.
   El carrusel visual de combos (.variante-visual-track) no se ve afectado. */
@media (max-width: 639px) {
  .variante-opciones { display: none; }
  .variante-select { display: block; }
}

/* selector de cantidad "- 1 +" */
.cantidad-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-fondo);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
}
.cantidad-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-fondo-tarjeta);
  box-shadow: 0 1px 4px rgba(36,31,61,0.15);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-texto);
}
.cantidad-valor { min-width: 18px; text-align: center; font-weight: 700; font-size: 0.9rem; }

.tarjeta-producto-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.btn-agregar {
  padding: 9px 14px;
  font-size: 0.82rem;
}


/* =========================================================
   MÁS VENDIDOS (carrusel horizontal)
   ========================================================= */

.mas-vendidos-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 16px 8px 16px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  scrollbar-width: none;
}
.mas-vendidos-track::-webkit-scrollbar { display: none; }
.mas-vendidos-track .tarjeta-producto {
  flex: 0 0 168px;
}
/* Importante: las tarjetas de "más vendidos" NUNCA abren detalle,
   solo permiten elegir variante/cantidad y agregar al carrito
   (ver js/app.js, función renderMasVendidos). */


/* =========================================================
   PROMOCIONES (3 destacadas + modal de detalle)
   ========================================================= */

.promos-grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 4px 16px 24px 16px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
}

.tarjeta-promo {
  display: flex;
  background: var(--color-fondo-tarjeta);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
}
.tarjeta-promo-imagen {
  width: 120px;
  flex-shrink: 0;
  background: var(--color-borde);
}
.tarjeta-promo-imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-promo-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.tarjeta-promo-titulo { font-size: 0.98rem; font-weight: 700; }
.tarjeta-promo-desc {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tarjeta-promo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 8px;
}
.btn-ver-promo {
  padding: 7px 12px;
  font-size: 0.75rem;
}

/* Modal genérico (se usa para detalle de promo y detalle de producto) */
.modal-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(36, 31, 61, 0.55);
  z-index: 100;
  align-items: flex-end;
  justify-content: center;
}
.modal-fondo.activo { display: flex; }

.modal-caja {
  background: var(--color-fondo-tarjeta);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding: 18px;
  position: relative;
  animation: modal-subir 0.2s ease-out;
}
@media (min-width: 640px) {
  .modal-caja { border-radius: 22px; margin-bottom: 24px; }
}
@keyframes modal-subir {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-cerrar {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-fondo);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  z-index: 5;
}
.modal-imagen {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-borde-chico);
  overflow: hidden;
  background: var(--color-borde);
  margin-bottom: 12px;
}
.modal-imagen img { width: 100%; height: 100%; object-fit: contain; }


/* =========================================================
   EXTRAS RELACIONADOS (dentro del modal de producto)
   ========================================================= */

.extras-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 14px 0 8px 0;
}
.extra-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--color-borde);
}
.extra-item-encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
}
.extra-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.extra-item-info { flex: 1; min-width: 0; }
.extra-item-nombre { font-size: 0.85rem; font-weight: 600; }
.extra-item-precio { font-size: 0.8rem; color: var(--color-principal); font-weight: 700; }

.extra-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-extra-toggle {
  padding: 8px 14px;
  font-size: 0.78rem;
  background: var(--color-fondo-tarjeta);
  color: var(--color-principal);
  border: 1.5px solid var(--color-principal);
}
.btn-extra-toggle.activo {
  background: var(--color-principal);
  color: #fff;
}
.extra-item-incluido {
  background: var(--color-fondo);
  border-radius: var(--radio-borde-chico);
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}



/* =========================================================
   CARRITO
   ========================================================= */

.carrito-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background: var(--color-fondo-tarjeta);
  z-index: 110;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.carrito-panel.activo { transform: translateX(0); }

.carrito-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(36,31,61,0.5);
  z-index: 105;
}
.carrito-overlay.activo { display: block; }

.carrito-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--color-borde);
}
.carrito-header h2 { font-size: 1.15rem; }
.carrito-cerrar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-fondo);
  display: flex; align-items: center; justify-content: center;
}

.carrito-lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}
.carrito-vacio {
  padding: 40px 16px;
  text-align: center;
  color: var(--color-texto-suave);
}

.carrito-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-borde);
}
.carrito-item img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.carrito-item-info { flex: 1; min-width: 0; }
.carrito-item-nombre { font-size: 0.88rem; font-weight: 700; }
.carrito-item-variante { font-size: 0.75rem; color: var(--color-texto-suave); margin: 2px 0; }
.carrito-item-extras { font-size: 0.72rem; color: var(--color-texto-suave); margin: 4px 0; }
.carrito-item-extras-titulo { font-weight: 700; margin-bottom: 2px; }
.carrito-item-extra-linea { line-height: 1.4; }
.carrito-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.carrito-item-precio { font-weight: 700; color: var(--color-principal); font-size: 0.85rem; }
.carrito-item-eliminar {
  background: none;
  color: var(--color-texto-suave);
  font-size: 0.75rem;
  text-decoration: underline;
}

.carrito-footer {
  border-top: 1px solid var(--color-borde);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.carrito-totales { display: flex; align-items: center; justify-content: space-between; }
.carrito-total-label { font-size: 1rem; font-weight: 700; }
.carrito-total-valor { font-size: 1.2rem; font-weight: 800; color: var(--color-principal); }

.form-campo { display: flex; flex-direction: column; gap: 4px; }
.form-campo label { font-size: 0.78rem; font-weight: 700; color: var(--color-texto-suave); }
.form-campo input,
.form-campo select,
.form-campo textarea {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--color-borde);
  font-family: var(--fuente-textos);
  font-size: 0.9rem;
  background: var(--color-fondo);
  color: var(--color-texto);
}
.form-campo textarea { resize: vertical; min-height: 60px; }

.btn-whatsapp { background: var(--color-whatsapp); }


/* =========================================================
   INFORMACIÓN DEL LOCAL
   ========================================================= */

.info-local {
  background: var(--color-secundario);
  color: #fff;
  padding: 32px 16px;
  margin-top: 24px;
}
.info-local-grid {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.info-local-marca {
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-local-marca img { width: 46px; height: 46px; border-radius: 50%; object-fit: contain; background: #fff; }
.info-local-marca span { font-family: var(--fuente-titulos); font-size: 1.2rem; }

.info-local-lista { display: flex; flex-direction: column; gap: 12px; }
.info-local-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; }
.info-local-item .icono { font-size: 1.1rem; flex-shrink: 0; }

.info-local-pagos { display: flex; flex-wrap: wrap; gap: 8px; }
.info-local-pago-chip {
  background: rgba(255,255,255,0.15);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
}


/* =========================================================
   PIE DE PÁGINA (FOOTER)
   ========================================================= */

.footer {
  padding: 16px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}
.footer a { text-decoration: underline; }


/* =========================================================
   SECCIONES DESTACADAS DE LA HOME ("Novedades Halloween", "Reingresos")
   =========================================================
   Bloque con fondo de color + carrusel de tarjetas compactas.
   Los colores salen de SECCIONES_HOME en js/data.js:
   colorFondo → --hs-fondo, colorTexto → --hs-texto,
   colorAcento → --hs-acento.
   En celular el bloque va de borde a borde (como una franja);
   desde tablet queda como una caja con bordes redondeados. */

.home-seccion {
  max-width: var(--ancho-maximo);
  margin: 14px auto 0 auto;
  padding: 0;
}
.home-seccion-caja {
  --hs-fondo: var(--color-secundario);
  --hs-texto: #FFFFFF;
  --hs-acento: var(--color-principal);
  background: var(--hs-fondo);
  color: var(--hs-texto);
  padding: 14px 0 14px 0;
}
.home-seccion-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 10px 16px;
}
.home-seccion-titulo {
  color: var(--hs-texto);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}
.home-seccion-subtitulo {
  margin: 3px 0 0 0;
  font-size: 0.82rem;
  line-height: 1.3;
  opacity: 0.85;
}
.home-seccion-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* flechas del carrusel: solo en computadora (en celular se desliza con el dedo) */
.mini-flecha {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  background: transparent;
  color: var(--hs-texto);
  border: 1.5px solid currentColor;
}
.home-seccion-ver-todo {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hs-texto);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}

/* carrusel horizontal: en celular se asoma la tarjeta siguiente
   para que se note que se puede deslizar */
.mini-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 2px 16px;
  scroll-padding-left: 16px;
  scrollbar-width: none;
}
.mini-track::-webkit-scrollbar { display: none; }

.mini-card {
  flex: 0 0 142px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-fondo-tarjeta);
  color: var(--color-texto);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  font: inherit;
}
.mini-card-imagen {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #F4F0F8;
}
.mini-card-imagen img { width: 100%; height: 100%; object-fit: cover; }
.mini-card-etiqueta {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--hs-acento);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.mini-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 8px 10px 10px 10px;
}
.mini-card-nombre {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-card-precio { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.mini-card-precio .precio-actual { font-size: 1rem; }
.mini-card-accion {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 8px;
  border-radius: 999px;
  background: var(--color-botones);
  color: var(--color-botones-texto);
}

@media (min-width: 640px) {
  .home-seccion { padding: 0 16px; margin-top: 18px; }
  .home-seccion-caja { border-radius: var(--radio-borde); padding: 18px 0 18px 0; }
  .home-seccion-header { padding: 0 20px 12px 20px; }
  .home-seccion-titulo { font-size: 1.7rem; }
  .home-seccion-subtitulo { font-size: 0.9rem; }
  .mini-track { padding: 0 20px 2px 20px; scroll-padding-left: 20px; gap: 14px; }
  .mini-card { flex-basis: 172px; }
}


/* =========================================================
   RESPONSIVE — TABLET Y ESCRITORIO
   =========================================================
   La web está pensada primero para celular. Estas reglas
   adaptan el diseño para pantallas más grandes. */

/* celulares muy angostos: un poco menos de aire en el header
   para que el buscador tenga más espacio real */
@media (max-width: 359px) {
  .header-fila { gap: 8px; padding: 10px 12px; }
  .buscador-input { padding-left: 32px; padding-right: 10px; font-size: 0.88rem; }
  .buscador-icono { left: 11px; }
  .header-logo span { font-size: 1rem; }
}

@media (min-width: 640px) {
  .productos-grilla { grid-template-columns: repeat(3, 1fr); }
  .promos-grilla { grid-template-columns: repeat(3, 1fr); }
  .tarjeta-promo { flex-direction: column; }
  .tarjeta-promo-imagen { width: 100%; aspect-ratio: 16/9; }
  .info-local-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .productos-grilla { grid-template-columns: repeat(4, 1fr); }
}

/* botón flotante de carrito: visible solo en pantallas chicas (celular) */
@media (max-width: 640px) {
  .carrito-flotante { display: flex; }
  .header-carrito-btn { display: none; }
}


/* =========================================================
   ESCRITORIO — MISMO CONTENIDO, MEJOR DISTRIBUIDO
   =========================================================
   Todas las secciones ya comparten el mismo ancho máximo
   (--ancho-maximo, ver arriba en VARIABLES GENERALES). Acá
   solo agrandamos el margen lateral, acomodamos categorías/
   subcategorías en filas (en vez de forzar scroll) y sumamos
   columnas a la grilla de productos para aprovechar el ancho. */

@media (min-width: 1024px) {

  .header-fila,
  .sliders,
  .seccion-titulo,
  .categorias-track,
  .subcategorias-track,
  .productos-grilla,
  .mas-vendidos-track,
  .promos-grilla,
  .info-local {
    padding-left: var(--padding-lateral-desktop);
    padding-right: var(--padding-lateral-desktop);
  }

  /* carrusel de a un slide por vez, con flechas visibles. En escritorio hay
     espacio de sobra, así que se mantiene el texto superpuesto sobre la
     imagen (con degradado) en vez del diseño apilado de mobile/tablet. */
  .slider-item { aspect-ratio: 16 / 7; } /* misma proporción que las fotos de slider (1600x700) */
  .slider-texto { padding: 80px 32px 28px 32px; }
  .slider-texto h2 { font-size: 1.8rem; }
  .slider-flecha { display: flex; }

  /* secciones destacadas: mismo margen lateral que el resto */
  .home-seccion { padding-left: var(--padding-lateral-desktop); padding-right: var(--padding-lateral-desktop); }
  .mini-card { flex-basis: 190px; }
  .mini-flecha { display: inline-flex; }

  /* categorías y subcategorías: se acomodan en varias filas en vez
     de forzar scroll horizontal, ya que en escritorio entran cómodas */
  .categorias-track,
  .subcategorias-track {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  /* los títulos/tracks que están DENTRO de las cajas de navegación usan
     el padding de su caja, no el margen lateral general de escritorio */
  .categorias { padding-left: var(--padding-lateral-desktop); padding-right: var(--padding-lateral-desktop); }
  .categorias-caja { padding: 20px 0; }
  .categorias-caja .categorias-titulo { padding: 0 24px; font-size: 1.4rem; margin-bottom: 14px; }
  .categorias-caja .categorias-track { padding: 2px 24px 4px 24px; gap: 12px; }
  .categoria-item { flex: 0 0 116px; width: 116px; padding: 10px 6px 12px 6px; }
  .categoria-icono { width: 84px; height: 84px; font-size: 2.3rem; }
  .categoria-nombre { font-size: 0.82rem; }

  .productos-cabecera {
    width: calc(100% - 2 * var(--padding-lateral-desktop));
    max-width: calc(var(--ancho-maximo) - 2 * var(--padding-lateral-desktop));
    margin-top: 32px;
  }
  .productos-cabecera .productos-titulo { padding: 20px 24px 14px 24px; font-size: 1.85rem; }
  .productos-cabecera .subcategorias-ayuda { padding: 0 24px; }
  .productos-cabecera .subcategorias-track { padding: 0 24px 2px 24px; }
  .subcategorias-franja { padding: 12px 0 16px 0; }

  /* grilla de productos: 4 columnas, con más aire entre tarjetas */
  .productos-grilla { grid-template-columns: repeat(4, 1fr); gap: 22px; }

  /* más vendidos: tarjetas un poco más anchas, mejor proporcionadas */
  .mas-vendidos-track { gap: 20px; }
  .mas-vendidos-track .tarjeta-producto { flex: 0 0 220px; }

  /* promociones: más aire entre tarjetas */
  .promos-grilla { gap: 20px; }

  /* info del local: más espacio entre columnas */
  .info-local-grid { gap: 32px; }
}