:root {
  --color-logo:#0372AC;
  --color-danger:#DD0000;
  --rojo:#ea1616;
  --rojooscuro:#c90808;
  --azulhype:#0093D7;
  --arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='black' d='M439.1 297.4C451.6 309.9 451.6 330.2 439.1 342.7L279.1 502.7C266.6 515.2 246.3 515.2 233.8 502.7C221.3 490.2 221.3 469.9 233.8 457.4L371.2 320L233.9 182.6C221.4 170.1 221.4 149.8 233.9 137.3C246.4 124.8 266.7 124.8 279.2 137.3L439.2 297.3z'/%3E%3C/svg%3E");
}

@font-face {
  font-family: Kanit-Light;
  src: url('../fonts/Kanit/Kanit-Light.ttf'); 
}


/* GENERAL */
  body{
    text-transform: uppercase;
  }

  .span-oferta{
    background:var(--rojo);
    color: white;
    padding: 1px 3px;
    font-size: 0.8rem;
  }

  .span-normal{
    background:white;
    color: white;
    padding: 1px 3px;
    font-size: 0.8rem;
  }

  .prod-desc {
      font-size: 1rem;
      margin: 10px 0 4px 0;
      font-weight: 600;;
  }

  .prod-desc a{
      color: black;
  }

  .prod-price {
      font-size: 0.9rem;
      font-weight: bold;
      color: #333;
      margin: 0;
  }
/* GENERAL */


/* SLIDER SWIPER */
  .slider-container{
    max-width: 70%;
    margin: 0 auto;
    margin-top: 4%;
    margin-bottom: 3%;
  }

  .slider-container .container{
    border-bottom: 1px solid black;
    margin-bottom: 15px;
  }

  .container h6{
    font-family: "Kanit-Light", monospace;
    font-size: 0.95rem;
    color:var(--rojooscuro);
  }

  .img-wrap {
      position: relative;
      display: block;
      overflow: hidden;
  }

  .img-wrap img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      transition: opacity 0.4s ease, transform 0.4s ease;
  }

  /* Imagen trasera oculta */
  .img-back {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
  }

  /* Hover */
  .img-wrap:hover .img-front {
      opacity: 0;
      transform: scale(1.05);
  }

  .img-wrap:hover .img-back {
      opacity: 1;
      transform: scale(1.05);
  }

  .row-price{
    display: flex;
    justify-content: space-between; /* uno a la izquierda, otro a la derecha */
    align-items: center;
    margin: 0;
  }

  .product-card-catego img{
    width: 100%;
    height: 800px;       /* <-- AJUSTA ESTE VALOR SEGÚN TU DISEÑO */
    object-fit: cover;/*contain;*/
    background-color:white;
    transition: transform 0.35s ease, filter 0.35s ease;
    display: block;
  }

  /* Overlay oscuro (apagado por defecto) */
  .product-card-catego::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.15);
      opacity: 0;
      transition: opacity 0.55s ease;
      pointer-events: none;
  }

  /* 🎯 SOLO EN HOVER */
  .product-card-catego:hover img {
      transform: scale(1.04);
      filter: brightness(1.30);
  }

  .product-card-catego:hover::after {
      opacity: 1;
  }

  .product-card-catego {
      position: relative;
      overflow: hidden;
  }




  .overlay-text {
      position: absolute;
      bottom: 0;/* Si quieres que esté al fondo; cambia a top:0 para arriba, o usa transform para centrar */
      left: 0;
      width: 100%;
      padding: 15px 10px;
      background: rgba(0, 0, 0, 0.55); /* Negro transparente */
      color: #fff;
      text-align: center;
      font-size: 2.5rem;
  }

  .swiper-slide{
    /*border-top: 1px solid black;*/
    /*margin-bottom: 10px;*/
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
      display: none;
  }

  .swiper-button-next,
  .swiper-button-prev {
      background: white var(--arrow-svg) no-repeat center center;
      background-size: 15px; /* tamaño del ícono */
      width: 45px;
      height: 45px;
      border-radius: 50%;
      padding: 15px;
      transition: 0.2s ease;
  }

  .swiper-button-next:hover,
  .swiper-button-prev:hover {
      transform: scale(1.1);
      box-shadow: 0 0 12px rgba(0,0,0,0.25);
  }

  .swiper-button-prev {
      transform: rotate(180deg);
  }

  .swiper-button-prev:hover {
      transform: rotate(180deg) scale(1.1);
  }

  .ver-todos-contenedor {
      text-align: center;
      margin: 3dvh 0px;
  }

  .btn-ver-todos {
      display: inline-block;
      padding: 10px 25px;
      background: black;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      text-decoration: none;
      transition: 0.3s ease;
  }

  .btn-ver-todos:hover {
    background: white;
    color: black;
    transform: scale(1.05);
    outline: 1px solid black;
    /*
    border: 1px solid black;
    */
  }


  @media (max-width: 768px){

    .product-card-catego {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .product-card-catego img{
      height: 550px;
    }

    .product-card img {
      height: 200px;
    }

    .slider-container{
      max-width: 95%;
      margin: 0 auto;
      margin-top: 10%;
      margin-bottom: 10%;
    }

    .row-price{
      display: block;
    }
  }


/* SLIDER SWIPER */


/*FONDOS SECCIONES*/
  .sec-productos{
    background:white;
  }

  .sec-banner{
    background: white;
  }
/*FONDOS SECCIONES*/


/*TOPBAR TEXTO DESLIZANTE*/
  .top-bar {
      background: var(--azulhype);
      color: #fff;
      overflow: hidden;
      font-family: Kanit-Light;

      font-size: 0.8rem;
      height: 2dvh;
      line-height: 1.5rem;
  }

  @media (max-width: 768px){
    .top-bar{
      font-size: 0.8rem;
      line-height: 1.5rem;
      height: 3dvh;
    }
  }

  .marquee {
      overflow: hidden;
      position: relative;
      width: 100%;
  }

  .marquee-content {
      display: inline-flex;
      gap: 200px; /* espacio entre mensajes */
      white-space: nowrap;
      padding-left: 100%;
      animation: marquee 25s linear infinite;
  }

  .marquee-content span {
      font-weight: 500;
  }

  /* Animación */
  @keyframes marquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-100%); }
  }
/*TOPBAR TEXTO DESLIZANTE*/


/* MENU HEADER */
  .main-menu > li > a{
    color:white;
  }

  .wrap-menu-desktop{
    background:rgba(0, 0, 0, 0.7);
  }

  .fix-menu-desktop .wrap-menu-desktop{
    background-color:black;
  }
/* MENU HEADER */


/* SLIDER PRINCIPAL */
  html {
      scroll-behavior: smooth;
  }

  .wrap-slick1,
  .slick1,
  .slick-list,
  .slick-track {
      height: 100%;/*vh*/
  }
  
  /* Cada slide */
  .item-slick1 {
      height: 100vh;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
  }

  /* Evita espacio fantasma */
  .slick-track {
      display: flex !important;
  }

  /* Asegura que fade no rompa stacking */
  .slick-slide {
      height: 100vh;
  }

  .texto-slider{
    color:white;
    background:#0000000d;
    margin-bottom:3.5%;
    font-size:7rem;
    -webkit-text-stroke:1px black;
  }

  @media(max-width: 768px){
      .item-slick1 {
        height: calc(100dvh - 0px);
      }

      .texto-slider{
          font-size:4rem;
      }

      a.btn-rojo1{
          padding: 1rem 2rem;
          font-size: 1rem;
      }
  }

  

  .rs1-slick1 .item-slick1 {
  height: calc(80vh - 84px);
  }

  .rs2-slick1 .item-slick1 {
      height: 80vh;
  }

  .layer-slick1 h2{
      display:inline-block;
      font-family: 'Kanit-Light';
      background:rgba(0, 0, 0, 0.9);/*negro con 60% transparencia*/
      color:white;
      padding:0;
      margin-bottom: 1%;
    }



  .btn-street-invert{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 6dvh;
      background: #000;
      color: #fff;

      font-family: 'Kanit-Light';
      font-weight: 700;
      font-size: 1.5rem;
      letter-spacing: 4px;
      padding: 1.5rem 3rem;

      outline: 2px solid silver;
      box-shadow:
          inset 0 0px 0 rgba(255,255,255,0.35),   /* luz fuerte arriba */
          inset 0 -3px 0 rgba(0,0,0,0.9),         /* sombra profunda abajo */
          0 10px 22px rgba(0,0,0,0.75);


      overflow: hidden;
      cursor: pointer;

      transition: 
          background .35s ease,
          color .35s ease,
          transform .25s ease,
          box-shadow .25s ease;
  }

  .btn-street-invert::before {
      content: "";
      position: absolute;
      top: 0;
      left: -120%;
      width: 120%;
      height: 100%;

      background: linear-gradient(
          120deg,
          transparent 0%,
          rgba(255,255,255,0.25) 50%,
          transparent 100%
      );

      animation: shineDark 3s infinite;
  }

  @keyframes shineDark {
      0% { left: -120%; }
      60% { left: 120%; }
      100% { left: 120%; }
  }

  .btn-street-invert:hover {
      background: #fff;
      color: #000;
      border-color: #000;

      
      box-shadow:
      inset 0 0px 0 rgba(0,0,0,0.6),
      inset 0 3px 0 rgba(255,255,255,0.45),
      0 14px 30px rgba(0,0,0,0.45);
      transform: translateY(-3px) scale(1.05);

  }

  .btn-street-invert:hover::before {
      background: linear-gradient(
          120deg,
          transparent 0%,
          rgba(0,0,0,0.2) 50%,
          transparent 100%
      );

      animation-duration: 1.5s;
  }
/* SLIDER PRINCIPAL */


/* PARA 3 IMAGENES DE CATEOGORIAS */
  .container-categorias{
    max-width: 90%;
  }
  .wrap-pic-w-custom {
    width: 100%;
    height: 80%; /* ✅ Ideal para escritorio */
    overflow: hidden;
  }

  .wrap-pic-w-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease; /* Efecto suave al pasar el mouse */
  }

  .wrap-pic-w-custom:hover img {
    transform: scale(1.05);
  }

  @media (max-width:600px) {
    .wrap-pic-w-custom {
      height: 200px; /* ✅ Ideal para móviles */
    }
  }
/* PARA 3 IMAGENES DE CATEOGORIAS */


/* SECCION DE STOCK*/
  .block2-pic {
    width: 100%;
    height: 26vh; /* 🔹 Ajusta la altura según el diseño que prefieras */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white; /* opcional: color de fondo uniforme */
  }

  .block2-pic img {
    width: 100%;
    object-fit: cover; /* 🔹 mantiene proporción sin deformar */
    transition: transform 0.4s ease;
    margin: auto;
  }

  @media (max-width: 768px){
    .block2-pic img {
      width: 65%;
    }
  }

  .block2-pic:hover img {
    transform: scale(1.05); /* 🔹 efecto zoom leve al pasar el mouse */
  }
/* SECCION DE STOCK*/