/* ==========================================================
   CATÁLOGO DALHI - WORDPRESS
   ========================================================== */


/* ==========================================================
   00. CONTROLES RÁPIDOS
   ========================================================== */

:root {

  /* ========================================================
     BANNER PC
     ======================================================== */

  --dalhi-banner-pc-alto: 300px;

  --dalhi-banner-quimicos-x: 50%;
  --dalhi-banner-quimicos-y: 20%;

  --dalhi-banner-materiales-x: 50%;
  --dalhi-banner-materiales-y: 45%;



  /* ========================================================
     LUPA TARJETA - PC
     ======================================================== */

  --dalhi-lupa-pc-circulo: 34px;
  --dalhi-lupa-pc-escala: 1;


  /* ========================================================
     LUPA TARJETA - TABLET
     ======================================================== */

  --dalhi-lupa-tablet-circulo: 36px;
  --dalhi-lupa-tablet-escala: 1;


  /* ========================================================
     LUPA TARJETA - MÓVIL
     ======================================================== */

  --dalhi-lupa-movil-circulo: 28px;
  --dalhi-lupa-movil-escala: 0.93;


  /* ========================================================
     VISTA RÁPIDA - ALTURA
     ======================================================== */

  --dalhi-vr-pc-alto: 470px;
  --dalhi-vr-tablet-alto: 400px;
  --dalhi-vr-movil-alto: 310px;


  /* ========================================================
     VISTA RÁPIDA - TAMAÑO IMAGEN
     ======================================================== */

  --dalhi-vr-pc-imagen-ancho: 410px;
  --dalhi-vr-pc-imagen-alto: 390px;

  --dalhi-vr-tablet-imagen-ancho: 350px;
  --dalhi-vr-tablet-imagen-alto: 330px;

  --dalhi-vr-movil-imagen-ancho: 255px;
  --dalhi-vr-movil-imagen-alto: 250px;


  /* ========================================================
     VISTA RÁPIDA - POSICIÓN VERTICAL DE LA IMAGEN
     ======================================================== */

  --dalhi-vr-pc-imagen-y: 25px;
}


/* ==========================================================
   01. VARIABLES DEL CATÁLOGO
   ========================================================== */

#catalogo-dalhi {

  --morado: #7653a3;
  --verde: #1a9f0e;
  --verde-oscuro: #158309;

  --fondo-imagen: #faf8fc;

  --borde: #dedede;
  --texto: #555555;

  --punto: #c5c5c5;
  --punto-activo: #666666;

  --ancho-maximo: 1500px;
  --ancho-categorias: 270px;


  /* PC */

  --pc-titulo-fuente: "Gilroy", Arial, sans-serif;
  --pc-titulo-tamano: 38px;
  --pc-titulo-grosor: 1.5px;

  --pc-menu-titulo-fuente: "Gilroy", Arial, sans-serif;
  --pc-menu-titulo-tamano: 17px;
  --pc-menu-titulo-grosor: 1px;

  --pc-categoria-fuente: "Gilroy", Arial, sans-serif;
  --pc-categoria-tamano: 15px;
  --pc-categoria-grosor: 0.7px;

  --pc-subcategoria-fuente: "Gilroy", Arial, sans-serif;
  --pc-subcategoria-tamano: 17px;
  --pc-subcategoria-grosor: 0.2px;

  --pc-producto-fuente: "Gilroy", Arial, sans-serif;
  --pc-producto-tamano: 13px;
  --pc-producto-grosor: 0.6px;

  --pc-marca-fuente: "Gilroy", Arial, sans-serif;
  --pc-marca-tamano: 16px;
  --pc-marca-grosor: 0.6px;

  --pc-presentacion-fuente: "Gilroy", Arial, sans-serif;
  --pc-presentacion-tamano: 13px;
  --pc-presentacion-grosor: 0.3px;


  /* TABLET */

  --tablet-titulo-fuente: "Gilroy", Arial, sans-serif;
  --tablet-titulo-tamano: 34px;
  --tablet-titulo-grosor: 1.5px;

  --tablet-menu-titulo-fuente: "Gilroy", Arial, sans-serif;
  --tablet-menu-titulo-tamano: 17px;
  --tablet-menu-titulo-grosor: 1px;

  --tablet-categoria-fuente: "Gilroy", Arial, sans-serif;
  --tablet-categoria-tamano: 13px;
  --tablet-categoria-grosor: 0.7px;

  --tablet-subcategoria-fuente: "Gilroy", Arial, sans-serif;
  --tablet-subcategoria-tamano: 14px;
  --tablet-subcategoria-grosor: 0px;

  --tablet-producto-fuente: "Gilroy", Arial, sans-serif;
  --tablet-producto-tamano: 13px;
  --tablet-producto-grosor: 0.6px;

  --tablet-marca-fuente: "Gilroy", Arial, sans-serif;
  --tablet-marca-tamano: 13px;
  --tablet-marca-grosor: 0.6px;

  --tablet-presentacion-fuente: "Gilroy", Arial, sans-serif;
  --tablet-presentacion-tamano: 13px;
  --tablet-presentacion-grosor: 0.3px;


  /* MÓVIL */

  --movil-titulo-fuente: "Gilroy", Arial, sans-serif;
  --movil-titulo-tamano: 30px;
  --movil-titulo-grosor: 1.5px;

  --movil-menu-titulo-fuente: "Gilroy", Arial, sans-serif;
  --movil-menu-titulo-tamano: 17px;
  --movil-menu-titulo-grosor: 1px;

  --movil-categoria-fuente: "Gilroy", Arial, sans-serif;
  --movil-categoria-tamano: 15px;
  --movil-categoria-grosor: 0.7px;

  --movil-subcategoria-fuente: "Gilroy", Arial, sans-serif;
  --movil-subcategoria-tamano: 16px;
  --movil-subcategoria-grosor: 0px;

  --movil-producto-fuente: "Gilroy", Arial, sans-serif;
  --movil-producto-tamano: 12px;
  --movil-producto-grosor: 0.6px;

  --movil-marca-fuente: "Gilroy", Arial, sans-serif;
  --movil-marca-tamano: 12px;
  --movil-marca-grosor: 0.6px;

  --movil-presentacion-fuente: "Gilroy", Arial, sans-serif;
  --movil-presentacion-tamano: 12px;
  --movil-presentacion-grosor: 0.3px;


  /* ESTADOS */

  --subcategoria-activa-fondo: rgba(26, 159, 14, 0.07);
  --subcategoria-activa-texto: #158309;
  --subcategoria-activa-barra: #1a9f0e;
  --subcategoria-activa-grosor-barra: 3px;

  --subcategoria-hover-fondo: rgba(118, 83, 163, 0.045);

  --producto-activo-borde: rgba(26, 159, 14, 0.32);
  --producto-activo-sombra: rgba(26, 159, 14, 0.10);
}


/* ==========================================================
   02. BASE
   ========================================================== */

#catalogo-dalhi,
#catalogo-dalhi * {
  box-sizing: border-box;
}

#catalogo-dalhi {
  position: relative;
  left: 50%;

  width: 100vw;

  margin-left: -50vw;

  padding: 55px 10px 70px;

  overflow-x: hidden;

  background: #ffffff;
  color: var(--texto);

  font-family: "Gilroy", Arial, sans-serif;
  font-synthesis: none;

  scroll-margin-top: 0;
}

#catalogo-dalhi button {
  font: inherit;
}

#catalogo-dalhi a {
  text-decoration: none !important;
}

#catalogo-dalhi .catalogo-producto[hidden] {
  display: none !important;
}

.catalogo-dalhi-contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);

  margin: 0 auto;
}


/* ==========================================================
   03. BANNERS
   ========================================================== */

.dalhi-categoria-hero {
  position: relative;
  left: 50%;

  width: 100vw;
  max-width: 100vw;

  margin-left: -50vw;

  display: none;

  aspect-ratio: 3 / 1;

  overflow: hidden;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


/* QUÍMICOS */

body:has(
  #catalogo-dalhi[data-categoria="quimicos-de-limpieza"]
)
.dalhi-categoria-hero {
  display: block;

  background-image:
    url("https://dalhi.pe/wp-content/uploads/2026/09/banner-quimico.webp");
}


/* MATERIALES */

body:has(
  #catalogo-dalhi[data-categoria="materiales-de-aseo-y-limpieza"]
)
.dalhi-categoria-hero {
  display: block;

  background-image:
    url("https://dalhi.pe/wp-content/uploads/2026/09/banner-material.webp");
}


/* PC */

@media (min-width: 1025px) {

  .dalhi-categoria-hero {
    height: var(--dalhi-banner-pc-alto) !important;

    aspect-ratio: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;
  }


  body:has(
    #catalogo-dalhi[data-categoria="quimicos-de-limpieza"]
  )
  .dalhi-categoria-hero {
    background-position:
      var(--dalhi-banner-quimicos-x)
      var(--dalhi-banner-quimicos-y)
      !important;
  }


  body:has(
    #catalogo-dalhi[data-categoria="materiales-de-aseo-y-limpieza"]
  )
  .dalhi-categoria-hero {
    background-position:
      var(--dalhi-banner-materiales-x)
      var(--dalhi-banner-materiales-y)
      !important;
  }

}


/* ==========================================================
   04. KADENCE
   ========================================================== */

body:has(
  #catalogo-dalhi:is(
    [data-categoria="quimicos-de-limpieza"],
    [data-categoria="materiales-de-aseo-y-limpieza"]
  )
)
.entry-hero,

body:has(
  #catalogo-dalhi:is(
    [data-categoria="quimicos-de-limpieza"],
    [data-categoria="materiales-de-aseo-y-limpieza"]
  )
)
.page-hero-section,

body:has(
  #catalogo-dalhi:is(
    [data-categoria="quimicos-de-limpieza"],
    [data-categoria="materiales-de-aseo-y-limpieza"]
  )
)
.entry-hero-container-inner {
  display: none !important;
}

body:has(#dalhi-categoria-hero) .content-area,
body:has(#dalhi-categoria-hero) .site-main,
body:has(#dalhi-categoria-hero) .entry-content,
body:has(#dalhi-categoria-hero) .entry-content-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(
  #catalogo-dalhi:is(
    [data-categoria="quimicos-de-limpieza"],
    [data-categoria="materiales-de-aseo-y-limpieza"]
  )
)
#catalogo-dalhi {
  padding-top: 42px;
}


/* ==========================================================
   05. TÍTULO
   ========================================================== */

.catalogo-dalhi-titulo {
  margin-bottom: 43px;

  text-align: center;
}

.catalogo-dalhi-titulo h1 {
  margin: 0;

  color: var(--morado) !important;

  font-family:
    var(--pc-titulo-fuente)
    !important;

  font-size:
    var(--pc-titulo-tamano)
    !important;

  font-weight: normal;

  line-height: 1.15;

  -webkit-text-stroke:
    var(--pc-titulo-grosor)
    currentColor;

  paint-order: stroke fill;
}

.catalogo-dalhi-titulo span {
  display: block;

  width: 55px;
  height: 4px;

  margin: 12px auto 0;

  border-radius: 4px;

  background: var(--verde);
}


/* ==========================================================
   06. DISTRIBUCIÓN
   ========================================================== */

.catalogo-dalhi-distribucion {
  display: grid;

  grid-template-columns:
    var(--ancho-categorias)
    minmax(0, 1fr);

  gap: 18px;

  align-items: start;
}


/* ==========================================================
   07. PANEL CATEGORÍAS
   ========================================================== */

.catalogo-dalhi-categorias {
  position: sticky;
  top: 18px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e1dce6;
  border-radius: 10px;

  box-shadow:
    0 5px 14px
    rgba(0, 0, 0, 0.10);
}

.catalogo-dalhi-categorias-titulo {
  margin: 0;

  padding: 17px 15px;

  background: var(--morado);

  color: #ffffff !important;

  font-family:
    var(--pc-menu-titulo-fuente)
    !important;

  font-size:
    var(--pc-menu-titulo-tamano)
    !important;

  font-weight: normal;

  line-height: 1.2;

  text-align: center;
  text-transform: uppercase;

  -webkit-text-stroke:
    var(--pc-menu-titulo-grosor)
    currentColor;

  paint-order: stroke fill;
}

.catalogo-dalhi-menu {
  padding: 0 13px 19px;
}

.catalogo-dalhi-grupo {
  width: 100%;
}


/* ==========================================================
   08. CATEGORÍAS PRINCIPALES
   ========================================================== */

.catalogo-dalhi-categoria-principal {
  width: 100%;
  min-height: 49px;

  padding: 13px 4px 10px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  border: 0;

  border-bottom:
    1px solid
    var(--morado)
    !important;

  outline: none !important;

  background:
    transparent
    !important;

  color: var(--morado);

  text-align: left;
  text-transform: uppercase;

  font-family:
    var(--pc-categoria-fuente)
    !important;

  font-size:
    var(--pc-categoria-tamano)
    !important;

  font-weight: normal;

  line-height: 1.25;

  cursor: pointer;

  box-shadow: none !important;

  -webkit-text-stroke:
    var(--pc-categoria-grosor)
    currentColor;

  paint-order: stroke fill;

  -webkit-tap-highlight-color:
    transparent;
}

.catalogo-dalhi-categoria-principal:hover,
.catalogo-dalhi-grupo.activo
.catalogo-dalhi-categoria-principal {
  color:
    var(--verde)
    !important;
}

.catalogo-dalhi-flecha {
  width: 15px;
  height: 15px;

  flex: 0 0 auto;

  fill: none;

  stroke: currentColor;

  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform
    0.25s ease;
}

.catalogo-dalhi-grupo.activo
.catalogo-dalhi-flecha {
  transform: rotate(180deg);
}


/* ==========================================================
   09. SUBCATEGORÍAS
   ========================================================== */

.catalogo-dalhi-subcategorias {
  display: none;

  padding: 5px 0;
}

.catalogo-dalhi-grupo.activo
.catalogo-dalhi-subcategorias {
  display: block;
}

.catalogo-dalhi-subcategoria {
  position: relative;

  width: 100%;

  padding:
    7px
    8px
    7px
    13px;

  display: block;

  border: 0;
  border-radius: 6px;

  outline: none !important;

  background:
    transparent
    !important;

  color: var(--morado);

  font-family:
    var(--pc-subcategoria-fuente)
    !important;

  font-size:
    var(--pc-subcategoria-tamano)
    !important;

  font-weight: normal;

  line-height: 1.2;

  text-align: left;

  cursor: pointer;

  box-shadow: none !important;

  -webkit-text-stroke:
    var(--pc-subcategoria-grosor)
    currentColor;

  paint-order: stroke fill;

  transition:
    color 0.18s ease,
    background 0.18s ease;

  -webkit-tap-highlight-color:
    transparent;
}

.catalogo-dalhi-subcategoria:hover {
  color:
    var(--verde)
    !important;

  background:
    var(--subcategoria-hover-fondo)
    !important;
}

.catalogo-dalhi-subcategoria.activo {
  color:
    var(--subcategoria-activa-texto)
    !important;

  background:
    var(--subcategoria-activa-fondo)
    !important;
}

.catalogo-dalhi-subcategoria.activo::before {
  content: "";

  position: absolute;

  top: 5px;
  bottom: 5px;
  left: 0;

  width:
    var(--subcategoria-activa-grosor-barra);

  border-radius: 5px;

  background:
    var(--subcategoria-activa-barra);
}


/* ==========================================================
   10. GRID
   ========================================================== */

.catalogo-dalhi-productos {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 12px;

  align-items: stretch;
}


/* ==========================================================
   11. TARJETA
   ========================================================== */

.catalogo-producto {
  width: 100%;
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;

  border:
    1px solid
    var(--borde);

  border-radius: 10px;

  box-shadow:
    0 3px 8px
    rgba(0, 0, 0, 0.09);

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.catalogo-producto.producto-activo {
  border-color:
    var(--producto-activo-borde);

  box-shadow:
    0 3px 10px
    var(--producto-activo-sombra);
}


/* Entrada desde buscador - otras marcas */

.catalogo-producto.entrada-busqueda-destacada {
  animation:
    dalhi-producto-encontrado
    2s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes dalhi-producto-encontrado {

  0% {
    border-color:
      rgba(26, 159, 14, 0.35);

    box-shadow:
      0 3px 8px
      rgba(0, 0, 0, 0.09);

    transform:
      translateY(0);
  }

  18% {
    border-color:
      rgba(26, 159, 14, 1);

    box-shadow:
      0 0 0 4px
      rgba(26, 159, 14, 0.22),
      0 10px 28px
      rgba(26, 159, 14, 0.30);

    transform:
      translateY(-3px);
  }

  55% {
    border-color:
      rgba(26, 159, 14, 0.90);

    box-shadow:
      0 0 0 3px
      rgba(26, 159, 14, 0.15),
      0 8px 22px
      rgba(26, 159, 14, 0.20);

    transform:
      translateY(-2px);
  }

  100% {
    border-color:
      var(--producto-activo-borde);

    box-shadow:
      0 3px 10px
      var(--producto-activo-sombra);

    transform:
      translateY(0);
  }

}


/* ==========================================================
   12. CARRUSEL TARJETA
   ========================================================== */

.catalogo-producto-carrusel {
  width: 100%;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  user-select: none;
}

.catalogo-producto-ventana {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background:
    var(--fondo-imagen);

  touch-action: pan-y;

  cursor: grab;
}

.catalogo-producto-ventana.arrastrando {
  cursor: grabbing;
}

.catalogo-producto-pista {
  width: 100%;
  height: 100%;

  display: flex;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition:
    transform
    0.34s ease;

  will-change: transform;
}

.catalogo-producto-pista.sin-transicion {
  transition: none;
}

.catalogo-producto-diapositiva {
  width: 100%;
  min-width: 100%;
  height: 100%;

  flex:
    0 0 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    var(--fondo-imagen);
}

.catalogo-producto-diapositiva img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  -webkit-user-drag: none;
}

.dalhi-catalogo-js-activo
.catalogo-producto-diapositiva img {
  opacity: 0;

  transition:
    opacity
    0.18s
    ease;
}

.dalhi-catalogo-js-activo
.catalogo-producto-diapositiva img.imagen-lista,

.dalhi-catalogo-js-activo
.catalogo-producto-diapositiva img.imagen-error {
  opacity: 1;
}


/* ==========================================================
   13. PUNTOS
   ========================================================== */

.catalogo-carrusel-puntos {
  width: 100%;
  min-height: 23px;

  padding:
    5px
    5px
    4px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  background: #ffffff;
}

.catalogo-carrusel-punto {
  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  display: block;

  border-radius: 50%;

  background:
    var(--punto);
}

.catalogo-carrusel-punto.activo {
  background:
    var(--punto-activo);

  transform:
    scale(1.16);
}


/* ==========================================================
   14. FLECHAS TARJETA PC
   ========================================================== */

.catalogo-carrusel-flecha-pc {
  display: none;
}

@media (min-width: 901px) {

  .catalogo-carrusel-flecha-pc {
    position: absolute;

    top: 50%;

    z-index: 8;

    width: 28px;
    height: 44px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0 !important;

    outline: none !important;

    background:
      transparent
      !important;

    color:
      var(--morado);

    box-shadow:
      none
      !important;

    cursor: pointer;

    transform:
      translateY(-50%);
  }

  .catalogo-carrusel-flecha-pc:hover {
    color:
      var(--verde);

    transform:
      translateY(-50%)
      scale(1.15);
  }

  .catalogo-carrusel-flecha-pc svg {
    display: block;

    width: 20px;
    height: 30px;

    fill: none;

    stroke: currentColor;

    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .catalogo-carrusel-flecha-anterior {
    left: 2px;
  }

  .catalogo-carrusel-flecha-siguiente {
    right: 2px;
  }
}


/* ==========================================================
   15. WHATSAPP
   ========================================================== */

.catalogo-producto-whatsapp {
  position: absolute;

  right: 8px;
  bottom: 8px;

  z-index: 7;

  width: 42px;
  height: 42px;

  padding: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: var(--verde);

  color: #ffffff !important;

  box-shadow: none;
}

.catalogo-producto-whatsapp:hover {
  background:
    var(--verde-oscuro);
}

.catalogo-producto-whatsapp svg {
  display: block;

  width: 25px;
  height: 25px;

  fill: currentColor;

  color: #ffffff;
}


/* ==========================================================
   16. LUPA TARJETA
   ========================================================== */

.catalogo-producto-vista-rapida {
  position: absolute;

  top: 11px;
  right: 11px;

  z-index: 15;

  width:
    var(--dalhi-lupa-pc-circulo);

  height:
    var(--dalhi-lupa-pc-circulo);

  padding: 0;

  display: grid;
  place-items: center;

  border: 0 !important;

  border-radius: 50%;

  outline: none !important;

  background:
    var(--morado)
    !important;

  color:
    #ffffff
    !important;

  cursor: pointer;

  box-shadow:
    none
    !important;

  line-height: 0;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.catalogo-producto-vista-rapida:hover {
  background:
    var(--verde)
    !important;

  transform:
    scale(1.05);
}

.catalogo-producto-vista-rapida span {
  position: relative;

  display: block;

  width: 16px;
  height: 16px;

  margin: 0;
  padding: 0;

  color:
    transparent
    !important;

  font-size:
    0
    !important;

  line-height:
    0
    !important;

  transform:
    scale(
      var(--dalhi-lupa-pc-escala)
    );
}

.catalogo-producto-vista-rapida span::before {
  content: "";

  position: absolute;

  top: 1px;
  left: 1px;

  width: 12px;
  height: 12px;

  border:
    2.3px solid
    #ffffff;

  border-radius: 50%;

  box-sizing: border-box;
}

.catalogo-producto-vista-rapida span::after {
  content: "";

  position: absolute;

  top: 12px;
  left: 11px;

  width: 7px;
  height: 2.2px;

  border-radius: 999px;

  background: #ffffff;

  transform:
    rotate(45deg);

  transform-origin:
    left center;
}


/* ==========================================================
   17. INFORMACIÓN PRODUCTO
   ========================================================== */

.catalogo-producto-informacion {
  width: 100%;

  padding:
    6px
    15px
    14px;

  flex: 1;

  display: flex;
  flex-direction: column;

  background: #ffffff;
}

.catalogo-producto-encabezado {
  min-height: 78px;

  padding:
    4px
    3px
    8px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-bottom:
    1px solid
    var(--morado);
}

.catalogo-producto h3 {
  margin: 0;

  color:
    var(--morado)
    !important;

  font-family:
    var(--pc-producto-fuente)
    !important;

  font-size:
    var(--pc-producto-tamano)
    !important;

  font-weight: normal;

  line-height: 1.2;

  text-align: center;
  text-transform: uppercase;

  -webkit-text-stroke:
    var(--pc-producto-grosor)
    currentColor;

  paint-order: stroke fill;
}

.catalogo-producto-marca {
  margin:
    3px
    0
    0;

  color:
    var(--morado)
    !important;

  font-family:
    var(--pc-marca-fuente)
    !important;

  font-size:
    var(--pc-marca-tamano)
    !important;

  font-weight: normal;

  line-height: 1.2;

  text-align: center;

  -webkit-text-stroke:
    var(--pc-marca-grosor)
    currentColor;

  paint-order: stroke fill;
}

.catalogo-producto-presentaciones {
  min-height: 47px;

  margin:
    7px
    0
    0;

  padding:
    0
    3px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: var(--verde);

  font-family:
    var(--pc-presentacion-fuente)
    !important;

  font-size:
    var(--pc-presentacion-tamano)
    !important;

  font-weight: normal;

  line-height: 1.35;

  text-align: center;

  -webkit-text-stroke:
    var(--pc-presentacion-grosor)
    currentColor;

  paint-order: stroke fill;
}


/* ==========================================================
   18. PC MEDIANA
   ========================================================== */

@media
(min-width: 901px)
and
(max-width: 1250px) {

  .catalogo-dalhi-productos {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 14px;
  }
}


/* ==========================================================
   19. TABLET
   ========================================================== */

@media
(min-width: 761px)
and
(max-width: 900px) {

  #catalogo-dalhi {
    padding-right: 14px;
    padding-left: 14px;
  }

  .catalogo-dalhi-distribucion {
    grid-template-columns:
      225px
      minmax(0, 1fr);

    gap: 16px;
  }

  .catalogo-dalhi-productos {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 14px;
  }

  .catalogo-dalhi-titulo h1 {
    font-family:
      var(--tablet-titulo-fuente)
      !important;

    font-size:
      var(--tablet-titulo-tamano)
      !important;

    -webkit-text-stroke:
      var(--tablet-titulo-grosor)
      currentColor;
  }

  .catalogo-dalhi-categorias-titulo {
    font-family:
      var(--tablet-menu-titulo-fuente)
      !important;

    font-size:
      var(--tablet-menu-titulo-tamano)
      !important;

    -webkit-text-stroke:
      var(--tablet-menu-titulo-grosor)
      currentColor;
  }

  .catalogo-dalhi-categoria-principal {
    font-family:
      var(--tablet-categoria-fuente)
      !important;

    font-size:
      var(--tablet-categoria-tamano)
      !important;

    -webkit-text-stroke:
      var(--tablet-categoria-grosor)
      currentColor;
  }

  .catalogo-dalhi-subcategoria {
    padding-left: 9px;

    font-family:
      var(--tablet-subcategoria-fuente)
      !important;

    font-size:
      var(--tablet-subcategoria-tamano)
      !important;

    -webkit-text-stroke:
      var(--tablet-subcategoria-grosor)
      currentColor;
  }

  .catalogo-producto h3 {
    font-family:
      var(--tablet-producto-fuente)
      !important;

    font-size:
      var(--tablet-producto-tamano)
      !important;

    -webkit-text-stroke:
      var(--tablet-producto-grosor)
      currentColor;
  }

  .catalogo-producto-marca {
    font-family:
      var(--tablet-marca-fuente)
      !important;

    font-size:
      var(--tablet-marca-tamano)
      !important;

    -webkit-text-stroke:
      var(--tablet-marca-grosor)
      currentColor;
  }

  .catalogo-producto-presentaciones {
    font-family:
      var(--tablet-presentacion-fuente)
      !important;

    font-size:
      var(--tablet-presentacion-tamano)
      !important;

    -webkit-text-stroke:
      var(--tablet-presentacion-grosor)
      currentColor;
  }

  .catalogo-producto-vista-rapida {
    top: 9px;
    right: 9px;

    width:
      var(--dalhi-lupa-tablet-circulo);

    height:
      var(--dalhi-lupa-tablet-circulo);
  }

  .catalogo-producto-vista-rapida span {
    transform:
      scale(
        var(--dalhi-lupa-tablet-escala)
      );
  }
}


/* ==========================================================
   20. MÓVIL
   ========================================================== */

@media (max-width: 760px) {

  #catalogo-dalhi {
    padding:
      30px
      10px
      50px;
  }

  .dalhi-categoria-hero {
    aspect-ratio: 3 / 1;
  }

  .catalogo-dalhi-titulo {
    margin-bottom: 28px;
  }

  .catalogo-dalhi-titulo span {
    width: 45px;
    height: 3px;

    margin-top: 8px;
  }

  .catalogo-dalhi-distribucion {
    grid-template-columns:
      1fr;

    gap: 28px;
  }

  .catalogo-dalhi-categorias {
    position: static;

    width: 100%;
    max-width: 390px;

    margin: 0 auto;
  }

  .catalogo-dalhi-productos {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }

  .catalogo-dalhi-titulo h1 {
    font-family:
      var(--movil-titulo-fuente)
      !important;

    font-size:
      var(--movil-titulo-tamano)
      !important;

    -webkit-text-stroke:
      var(--movil-titulo-grosor)
      currentColor;
  }

  .catalogo-dalhi-categorias-titulo {
    font-family:
      var(--movil-menu-titulo-fuente)
      !important;

    font-size:
      var(--movil-menu-titulo-tamano)
      !important;

    -webkit-text-stroke:
      var(--movil-menu-titulo-grosor)
      currentColor;
  }

  .catalogo-dalhi-categoria-principal {
    font-family:
      var(--movil-categoria-fuente)
      !important;

    font-size:
      var(--movil-categoria-tamano)
      !important;

    -webkit-text-stroke:
      var(--movil-categoria-grosor)
      currentColor;
  }

  .catalogo-dalhi-subcategoria {
    font-family:
      var(--movil-subcategoria-fuente)
      !important;

    font-size:
      var(--movil-subcategoria-tamano)
      !important;

    -webkit-text-stroke:
      var(--movil-subcategoria-grosor)
      currentColor;
  }

  .catalogo-producto h3 {
    font-family:
      var(--movil-producto-fuente)
      !important;

    font-size:
      var(--movil-producto-tamano)
      !important;

    -webkit-text-stroke:
      var(--movil-producto-grosor)
      currentColor;
  }

  .catalogo-producto-marca {
    font-family:
      var(--movil-marca-fuente)
      !important;

    font-size:
      var(--movil-marca-tamano)
      !important;

    -webkit-text-stroke:
      var(--movil-marca-grosor)
      currentColor;
  }

  .catalogo-producto-presentaciones {
    font-family:
      var(--movil-presentacion-fuente)
      !important;

    font-size:
      var(--movil-presentacion-tamano)
      !important;

    -webkit-text-stroke:
      var(--movil-presentacion-grosor)
      currentColor;
  }

  .catalogo-producto-whatsapp {
    right: 6px;
    bottom: 6px;

    width: 36px;
    height: 36px;
  }

  .catalogo-producto-whatsapp svg {
    width: 21px;
    height: 21px;
  }

  .catalogo-producto-vista-rapida {
    top: 6px;
    right: 6px;

    width:
      var(--dalhi-lupa-movil-circulo);

    height:
      var(--dalhi-lupa-movil-circulo);
  }

  .catalogo-producto-vista-rapida span {
    transform:
      scale(
        var(--dalhi-lupa-movil-escala)
      );
  }

  .catalogo-producto-informacion {
    padding:
      5px
      9px
      10px;
  }

  .catalogo-producto-encabezado {
    min-height: 76px;

    padding:
      3px
      2px
      7px;
  }

  .catalogo-producto-presentaciones {
    min-height: 42px;

    margin-top: 5px;
  }
}


@media (max-width: 360px) {

  .catalogo-dalhi-productos {
    gap: 8px;
  }
}


/* ==========================================================
   21. TRANSICIONES
   ========================================================== */

@view-transition {
  navigation: auto;
}

#catalogo-dalhi {
  view-transition-name:
    catalogo-dalhi;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-old(catalogo-dalhi) {
  animation:
    dalhi-catalogo-salida
    180ms
    ease-in
    both;
}

::view-transition-new(catalogo-dalhi) {
  animation:
    dalhi-catalogo-entrada
    320ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes dalhi-catalogo-salida {

  from {
    opacity: 1;

    transform:
      translateY(0);
  }

  to {
    opacity: 0;

    transform:
      translateY(-5px);
  }
}

@keyframes dalhi-catalogo-entrada {

  from {
    opacity: 0;

    transform:
      translateY(7px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ==========================================================
   22. VISTA RÁPIDA - OVERLAY
   ========================================================== */

.dalhi-vr-overlay {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    rgba(0, 0, 0, 0.48);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity
    0.20s
    ease,
    visibility
    0s
    linear
    0.20s;
}

.dalhi-vr-overlay.activo {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transition-delay:
    0s;
}


/* ==========================================================
   23. VISTA RÁPIDA - MODAL
   ========================================================== */

.dalhi-vr-modal {
  position: relative;

  width:
    min(
      960px,
      94vw
    );

  max-height: 90vh;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.08fr);

  overflow: hidden;

  background: #ffffff;

  border-radius: 16px;

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.22);

  opacity: 0;

  transform:
    translateY(9px)
    scale(0.988);

  transition:
    opacity
    0.22s
    ease,
    transform
    0.24s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.dalhi-vr-overlay.activo
.dalhi-vr-modal {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* ==========================================================
   24. VISTA RÁPIDA - CERRAR
   ========================================================== */

.dalhi-vr-cerrar {
  position: absolute;

  top: 14px;
  right: 14px;

  z-index: 20;

  width: 38px;
  height: 38px;

  padding: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;

  border-radius: 50%;

  outline: none;

  background: #1a9f0e;

  color: #ffffff;

  font-family:
    Arial,
    sans-serif;

  font-size: 25px;

  line-height: 1;

  cursor: pointer;
}

.dalhi-vr-cerrar:hover {
  background: #158309;
}


/* ==========================================================
   25. VISTA RÁPIDA - CARRUSEL
   ========================================================== */

.dalhi-vr-imagenes {
  position: relative;

  width: 100%;
  min-width: 0;

  min-height:
    var(--dalhi-vr-pc-alto);

  overflow: hidden;

  padding: 0;

  background: #ffffff;

  touch-action: pan-y;

  cursor: grab;

  user-select: none;

  -webkit-user-select: none;
}

.dalhi-vr-imagenes.arrastrando {
  cursor: grabbing;
}

.dalhi-vr-pista {
  position: relative;

  width: 100%;

  height:
    var(--dalhi-vr-pc-alto);

  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;

  margin: 0;
  padding: 0;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition:
    transform
    0.34s ease;

  will-change: transform;
}

.dalhi-vr-pista.sin-transicion {
  transition: none;
}

.dalhi-vr-slide {
  position: relative;

  width: 100%;
  min-width: 100%;
  max-width: 100%;

  height:
    var(--dalhi-vr-pc-alto);

  flex:
    0 0 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  margin: 0;

  padding:
    40px
    44px;

  overflow: hidden;

  background: #ffffff;
}


/* ==========================================================
   25A. IMAGEN DEL DETALLE
   ========================================================== */

.dalhi-vr-slide
.dalhi-vr-imagen {
  display: block;

  width: 100%;
  height: 100%;

  max-width:
    var(--dalhi-vr-pc-imagen-ancho);

  max-height:
    var(--dalhi-vr-pc-imagen-alto);

  margin: auto;

  object-fit: contain;
  object-position: center;

  background: #ffffff;

  pointer-events: none;

  user-select: none;

  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.dalhi-catalogo-js-activo
.dalhi-vr-slide
.dalhi-vr-imagen {
  opacity: 0;

  transition:
    opacity
    0.18s
    ease;
}

.dalhi-catalogo-js-activo
.dalhi-vr-slide
.dalhi-vr-imagen.imagen-lista,

.dalhi-catalogo-js-activo
.dalhi-vr-slide
.dalhi-vr-imagen.imagen-error {
  opacity: 1;
}


/* ==========================================================
   25B. IMAGEN DEL DETALLE - SOLO PC
   ========================================================== */

@media (min-width: 901px) {

  .dalhi-vr-slide
  .dalhi-vr-imagen {
    transform:
      translateY(
        var(--dalhi-vr-pc-imagen-y)
      );
  }
}


/* ==========================================================
   26. VISTA RÁPIDA - FLECHAS
   ========================================================== */

.dalhi-vr-flecha {
  position: absolute;

  top: 50%;

  z-index: 10;

  width: 38px;
  height: 46px;

  padding: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;

  background: transparent;

  color: #7653a3;

  font-family:
    Arial,
    sans-serif;

  font-size: 32px;

  cursor: pointer;

  transform:
    translateY(-50%);
}

.dalhi-vr-anterior {
  left: 10px;
}

.dalhi-vr-siguiente {
  right: 10px;
}


/* ==========================================================
   27. VISTA RÁPIDA - PUNTOS
   ========================================================== */

.dalhi-vr-puntos {
  position: absolute;

  left: 50%;
  bottom: 18px;

  z-index: 11;

  display: flex;

  gap: 6px;

  transform:
    translateX(-50%);
}

.dalhi-vr-punto {
  width: 8px;
  height: 8px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #c5c5c5;

  cursor: pointer;
}

.dalhi-vr-punto.activo {
  background: #666666;

  transform:
    scale(1.15);
}


/* ==========================================================
   28. VISTA RÁPIDA - INFORMACIÓN
   ========================================================== */

.dalhi-vr-info {
  padding:
    54px
    44px
    38px;

  display: flex;
  flex-direction: column;

  overflow-y: auto;
}

.dalhi-vr-titulo {
  order: 1;

  margin:
    0
    0
    5px;

  color: #7653a3;

  font-family:
    "Gilroy",
    Arial,
    sans-serif;

  font-size: 29px;
  font-weight: 700;

  line-height: 1.15;
}

.dalhi-vr-marca {
  order: 2;

  margin:
    0
    0
    20px;

  color: #7653a3;

  font-family:
    "Gilroy",
    Arial,
    sans-serif;

  font-size: 17px;
  font-weight: 500;

  line-height: 1.3;
}

.dalhi-vr-subtitulo {
  margin:
    18px
    0
    7px;

  color: #444444;

  font-family:
    "Gilroy",
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.3;

  text-transform: uppercase;
}


/* DESCRIPCIÓN */

.dalhi-vr-subtitulo-descripcion {
  order: 3;
}

.dalhi-vr-descripcion {
  order: 4;

  margin: 0;

  max-width: 470px;

  color: #666666;

  font-family:
    "Gilroy",
    Arial,
    sans-serif;

  font-size: 15px;
  font-weight: 500;

  line-height: 1.55;
}


/* PRESENTACIONES */

.dalhi-vr-subtitulo-presentaciones {
  order: 5;
}

.dalhi-vr-presentaciones {
  order: 6;

  margin: 0;

  color: #666666;

  font-family:
    "Gilroy",
    Arial,
    sans-serif;

  font-size: 15px;
  font-weight: 500;

  line-height: 1.45;
}


/* AROMAS */

.dalhi-vr-subtitulo-aromas {
  order: 7;
}

.dalhi-vr-aromas {
  order: 8;

  margin: 0;

  color: #666666;

  font-family:
    "Gilroy",
    Arial,
    sans-serif;

  font-size: 15px;
  font-weight: 500;

  line-height: 1.45;
}


/* ==========================================================
   29. VISTA RÁPIDA - BOTONES
   ========================================================== */

.dalhi-vr-botones {
  order: 9;

  margin-top: 26px;

  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}


/* BASE */

.dalhi-vr-whatsapp,
.dalhi-vr-comprar {
  width: auto;

  min-height: 40px;

  padding:
    0
    17px;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 7px;

  font-family:
    "Gilroy",
    Arial,
    sans-serif;

  font-size: 14px;
  font-weight: 700;

  line-height: 1;

  text-align: center;

  text-decoration:
    none
    !important;

  white-space: nowrap;

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}


/* WHATSAPP */

.dalhi-vr-botones
.dalhi-vr-whatsapp {
  min-width: 215px;

  gap: 8px !important;

  overflow: hidden;

  background: #1a9f0e;

  color:
    #ffffff
    !important;
}

.dalhi-vr-botones
.dalhi-vr-whatsapp:hover {
  background: #158309;

  transform:
    translateY(-1px);
}


/* ICONO WHATSAPP
   Selector deliberadamente específico para impedir
   que Kadence u otros estilos globales agranden el SVG.
*/

.dalhi-vr-botones
.dalhi-vr-whatsapp
> svg.dalhi-vr-whatsapp-icono {
  position: static !important;

  display: block !important;

  width: 20px !important;
  height: 20px !important;

  min-width: 20px !important;
  min-height: 20px !important;

  max-width: 20px !important;
  max-height: 20px !important;

  flex:
    0
    0
    20px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: #ffffff !important;

  fill: #ffffff !important;

  transform: none !important;

  overflow: visible !important;

  object-fit: contain !important;
}

.dalhi-vr-botones
.dalhi-vr-whatsapp
> svg.dalhi-vr-whatsapp-icono
path {
  fill: #ffffff !important;

  stroke: none !important;
}


/* TEXTO */

.dalhi-vr-botones
.dalhi-vr-whatsapp
> span {
  display: inline-block;

  margin: 0;
  padding: 0;

  color:
    #ffffff
    !important;

  line-height: 1;

  white-space: nowrap;
}


/* COMPRAR */

.dalhi-vr-comprar {
  min-width: 120px;

  background: #7653a3;

  color:
    #ffffff
    !important;
}

.dalhi-vr-comprar:hover {
  background: #65458e;

  transform:
    translateY(-1px);
}


/* TABLET */

@media
(min-width: 561px)
and
(max-width: 1000px) {

  .dalhi-vr-botones
  .dalhi-vr-whatsapp {
    gap: 7px !important;
  }

  .dalhi-vr-botones
  .dalhi-vr-whatsapp
  > svg.dalhi-vr-whatsapp-icono {
    width: 19px !important;
    height: 19px !important;

    min-width: 19px !important;
    min-height: 19px !important;

    max-width: 19px !important;
    max-height: 19px !important;

    flex:
      0
      0
      19px !important;
  }
}


/* MÓVIL */

@media (max-width: 560px) {

  .dalhi-vr-botones {
    gap: 8px;
  }

  .dalhi-vr-botones
  .dalhi-vr-whatsapp {
    gap: 6px !important;
  }

  .dalhi-vr-botones
  .dalhi-vr-whatsapp
  > svg.dalhi-vr-whatsapp-icono {
    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;
    min-height: 17px !important;

    max-width: 17px !important;
    max-height: 17px !important;

    flex:
      0
      0
      17px !important;
  }
}


/* ==========================================================
   30. VISTA RÁPIDA - TABLET
   ========================================================== */

@media
(min-width: 761px)
and
(max-width: 900px) {

  .dalhi-vr-imagenes {
    min-height:
      var(--dalhi-vr-tablet-alto);
  }

  .dalhi-vr-pista {
    height:
      var(--dalhi-vr-tablet-alto);
  }

  .dalhi-vr-slide {
    height:
      var(--dalhi-vr-tablet-alto);

    padding:
      34px
      38px;
  }

  .dalhi-vr-slide
  .dalhi-vr-imagen {
    max-width:
      var(--dalhi-vr-tablet-imagen-ancho);

    max-height:
      var(--dalhi-vr-tablet-imagen-alto);

    transform: none;
  }
}


/* ==========================================================
   31. VISTA RÁPIDA - MÓVIL
   ========================================================== */

@media (max-width: 760px) {

  .dalhi-vr-overlay {
    padding: 10px;
  }

  .dalhi-vr-modal {
    width: 100%;

    max-height: 94vh;

    grid-template-columns:
      1fr;

    overflow-y: auto;

    border-radius: 14px;
  }

  .dalhi-vr-imagenes {
    min-height:
      var(--dalhi-vr-movil-alto);
  }

  .dalhi-vr-pista {
    height:
      var(--dalhi-vr-movil-alto);
  }

  .dalhi-vr-slide {
    height:
      var(--dalhi-vr-movil-alto);

    padding:
      30px
      36px;
  }

  .dalhi-vr-slide
  .dalhi-vr-imagen {
    max-width:
      var(--dalhi-vr-movil-imagen-ancho);

    max-height:
      var(--dalhi-vr-movil-imagen-alto);

    transform: none;
  }

  .dalhi-vr-info {
    padding:
      25px
      20px
      25px;
  }

  .dalhi-vr-titulo {
    font-size: 23px;
  }

  .dalhi-vr-marca {
    margin-bottom: 12px;

    font-size: 15px;
  }

  .dalhi-vr-subtitulo {
    margin-top: 14px;

    font-size: 12px;
  }

  .dalhi-vr-descripcion,
  .dalhi-vr-presentaciones,
  .dalhi-vr-aromas {
    font-size: 14px;
  }

  .dalhi-vr-descripcion {
    line-height: 1.5;
  }

  .dalhi-vr-flecha {
    width: 32px;

    font-size: 27px;
  }

  .dalhi-vr-botones {
    margin-top: 21px;

    flex-direction: column;

    align-items: stretch;

    gap: 9px;
  }

  .dalhi-vr-whatsapp,
  .dalhi-vr-comprar {
    width: 100%;

    min-width: 0;
    min-height: 42px;

    font-size: 14px;
  }
}


/* ==========================================================
   32. MOVIMIENTO REDUCIDO
   ========================================================== */

@media
(prefers-reduced-motion: reduce) {

  .catalogo-producto-pista,
  .dalhi-vr-pista,
  .dalhi-vr-overlay,
  .dalhi-vr-modal,

  .dalhi-catalogo-js-activo
  .catalogo-producto-diapositiva img,

  .dalhi-catalogo-js-activo
  .dalhi-vr-slide
  .dalhi-vr-imagen {
    transition-duration:
      1ms !important;
  }

  .catalogo-producto.entrada-busqueda-destacada {
    animation-duration:
      1ms !important;
  }

  ::view-transition-old(catalogo-dalhi),
  ::view-transition-new(catalogo-dalhi) {
    animation-duration:
      1ms;
  }
}