/* Custom brand styles */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&family=Roboto+Condensed:wght@400;700&display=swap');
:root { 
  --primary: #bc2119;
  --bs-primary: var(--primary);
}

body {
  background-color: #ffffff;
}

.text-primary {
  color: var(--primary) !important;
}

h1, h2, h3, h4, h5 {
  font-family: "Roboto Condensed", Arial, sans-serif;
}

body {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
  line-height: 1.35em;
  letter-spacing: 0em;
  text-transform: none;
  color: #262626;
}

a{
  color: var(--primary);
}

.btn {
  background-color: var(--primary);
  border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  /* si quieres también el texto en activo */
  --bs-btn-active-color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  font-family: "Roboto", Arial, sans-serif;
  line-height: 1.25em;
  letter-spacing: 0.018em;
  text-transform: uppercase;
  color: #ffffff;
  transition: all 0.3s ease;
}

/* Efectos hover para cards */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
}

/* Efecto zoom para imágenes */
.hover-zoom {
  transition: transform 0.5s ease;
}

.hover-lift:hover .hover-zoom {
  transform: scale(1.1);
}

/* Animaciones suaves */
.card {
  transition: all 0.3s ease;
}

/* Iconos Bootstrap */
.bi {
  vertical-align: middle;
}

.btn:hover,
.btn:active,
.btn:focus,
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #ffffff;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary.active {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Navbar (light background, primary accents) */
.navbar .nav-link { color: #333; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--primary); }
.navbar .nav-link.active { color: var(--primary); position: relative; }
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: 0rem;
  height: 3px;
  background-color: var(--primary);
  border-radius: 2px;
}

/* Tabs (nav-pills) with --primary */
.nav-pills .nav-link { color: #555; border: 1px solid transparent; }
.nav-pills .nav-link:hover { color: var(--primary); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}


/*Home style*/

   .grid-categorias > a:before{
    content: "";
    width: 100px;
    height: 5px;
    background-color:var(--primary);
    position: absolute;
    top: 0;
    left: 30px;
    transition: all 0.5s ease;
  }

.grid-categorias:hover > a:before{ height: 100%; width:100%; opacity: 0.05; left: 0px; border-radius: var(--bs-card-border-radius) }


  /*  .productos-cat{ padding-top: 60px; padding-bottom:var(--100); }
    .grid-categorias figure.relative{ border-radius: 10px; box-shadow: 0px 2px 10px 5px rgba(22, 69, 57, 0.05); background-color: #fff; transition: all 0.4s ease; }

    .grid-categorias figure.relative:hover{ transform: scale(1.1); }
    .grid-categorias figure.relative > a{ border-radius: 0 10px 10px 0; height: 195px; width: 100%; display: block; position: relative; z-index: 1; }
    .grid-categorias figure.relative > a:before{  content: "";  width: 100px; height: 7px; background-color:var(--primary); position: absolute; top: 0; left: 30px; transition: all 0.5s ease; }
    .grid-categorias figure.relative:hover > a:before{ height: 100%; width:100%; opacity: 0.1; left: 0px; border-radius: 10px; }
    .grid-categorias figure.relative > a img{ border-radius: 0 10px 10px 0; height: 100%; object-fit: cover; max-width: 60%; margin-left:auto; width: auto; mix-blend-mode: multiply; }
    .grid-categorias figure.relative .elementor-image-carousel-caption{ position: absolute !important; top: 0; left: 0; padding: 30px 0 30px 30px; transform: unset; left: unset; bottom: unset; width: 190px; height: 100%; }
    .grid-categorias figure.relative .elementor-image-carousel-caption .pk-item-text{ font-size: 21px; line-height:120%; font-weight: 500%; text-align: left; }
*/