@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {
  /* --- Color --- */
  --color-primary: #7d1f4e;        /* magenta/vino de la barra de navegación */
  --color-primary-dark: #5a1739;
  --color-secondary: #6c6c78;      /* gris del degradé derecho de la barra */
  --color-text: #2b2b2e;
  --color-text-muted: #6c6c78;
  --color-bg: #ffffff;
  --color-bg-light: #f7f6f8;
  --color-border: #e4e2e6;

  /* --- Tipografía (una sola familia, 5 niveles) --- */
  --font-base: 'Lato', Arial, sans-serif;

  --fs-h1: 2.5rem;
  --fs-h2: 1.9rem;
  --fs-h3: 1.3rem;
  --fs-p: 1rem;
  --fs-p-nav: 1rem;
  --fs-p-small: 0.8rem;

  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* --- Layout --- */
  --nav-offset: 90px;      /* alto fijo de la barra sticky, para scroll-margin-top */
  --container-max: 1280px;
  --radius: 4px;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  font-size: var(--fs-p);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-light);
}

main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

h1, .h1 { font-family: var(--font-base); font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: 400; }
h2, .h2 { font-family: var(--font-base); font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 300; }
h3, .h3 { font-family: var(--font-base); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 400; }
p        { font-size: var(--fs-p); }
p.small, small { font-size: var(--fs-p-small); color: var(--color-text-muted); }
a.small {font-size: var(--fs-p-small); color: var(--color-text-muted);}
button.small {font-size: var(--fs-p-small);}

.btn_marca_1 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #ffffff;
  border: 0px;
  padding: 10px 20px 12px 20px;
  transition: transform .2s ease;
}
.btn_marca_1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-secondary);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}
.btn_marca_1:hover { color: #fff; transform: translateY(-5px); }
.btn_marca_1:hover::after { opacity: 1; }

.btn_catalogo {background:var(--color-primary); font-size: var(--fs-p-small); color: #fff; padding: 5px 15px; transition: transform .2s ease;}
.btn_catalogo:hover { background: var(--color-primary-dark); color: #fff; }

.btn .bi { margin-right: 5px;}

[id] { scroll-margin-top: var(--nav-offset); }


/* --- Grilla de productos --- */
/* --- Grilla de productos --- */

.producto-img-wrap { position: relative; }
.producto-img-wrap img {
  transition: transform .4s ease, opacity .4s ease;
}
.producto-img-base { opacity: 1; }
.producto-img-hover { opacity: 0; }
.producto-img-wrap:hover .producto-img-base { transform: scale(1.08); opacity: 0; }
.producto-img-wrap:hover .producto-img-hover { transform: scale(1.08); opacity: 1; }

/* Si no hay segunda imagen, la base simplemente hace zoom sin crossfade */
.producto-img-wrap:hover .producto-img-base:only-child { opacity: 1; }

.producto-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;
}


/* --- Paginación --- */
/* --- Paginación --- */

.pagination .page-link { color: var(--color-primary); }
.pagination .page-link:hover { color: var(--color-primary-dark); background-color: var(--color-bg-light); }
.pagination .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--color-text-muted); }


/* --- NAV --- */
/* --- NAV --- */


.navbar-brand img {height: 25px;}
.nav_buscador {max-width: 480px;}

.nav_color {background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);}
.nav-link { color: rgba(255, 255, 255, 0.8); margin: 0px 5px; padding: 5px 0px; font-size: var(--fs-p-nav);}
.nav-link:hover { color: rgba(255, 255, 255, 1)}


/* --- Carousel --- */
/* --- Carousel --- */


.carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 25px !important; border-bottom: 0px; border-top: 0px}


/* --- Footer --- */
/* --- Footer --- */


footer {background-color: var(--color-secondary);}
footer p { color: rgba(255, 255, 255, 1);}
footer .small { color: rgba(255, 255, 255, 0.8);}
footer a { color: rgba(255, 255, 255, 0.8);}
footer a:hover { color: rgba(255, 255, 255, 1) !important;}
.footer_jlx a { color: rgba(255, 255, 255, 1); opacity: 0.8;}
.footer_jlx a:hover { opacity: 1;}
.footer_jlx a img {height: 30px; margin-top: -3px; margin-left: 2px;}


/* --- Categoria --- */
/* --- Categoria --- */


.breadcrumb { font-size: var(--fs-p-small); text-decoration: none;}
.breadcrumb li a { text-decoration: none; color: var(--color-text); font-weight: 600;}