/* =====================================================
   HERO PRODUCTOS
===================================================== */

/* HERO PRODUCTOS PREMIUM */
.products-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

/* overlay elegante */
.productos-hero-overlay {
  position: absolute;
  inset: 0;
}

/* caja glass premium */
.productos-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}


.products-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.products-hero h1 {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  color: #fff;
  font-size: 42px;
  margin-bottom: 5px;
  letter-spacing: 2px;
}

.products-hero p {
  font-size: 18px;
  color: #fff;
  margin-bottom: 26px;
  max-width: 650px;
}

/* badges */
.hero-badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-badges span {
  background: rgb(255 255 255 / 83%);
    color: var(--color-primary);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 550;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: all .25s ease;
}

.hero-badges span:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* Dots decorativos */
.hero-dots {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e6e6e6;
}

.hero-dots span.active {
  background: var(--color-primary);
}

/* ===== HERO entrada suave ===== */

.products-hero-inner {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 1s ease forwards;
  animation-delay: .15s;
}


@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================
   BREADCRUMB (ALINEADO A CONTENIDO)
===================================================== */
.breadcrumb {
  max-width: 1280px;
  margin: 0px 0px; /* separaciones correctas */
  padding: 25px 0px 0px 10px;        /* mismo padding que grids */
  font-size: 14px;
  color: #666;
}

.b-category {
max-width:1280px;
margin:40px auto 20px auto;
padding:0 20px;
font-size:14px;
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb span {
  margin: 0 4px;
}

.breadcrumb .current {
  color: #999;
}

/* =====================================================
   GRID CATEGORÍAS
===================================================== */
.products-categories {
  padding: 60px 20px 100px;
}

.categories-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr));
  gap: 30px;
}

/* =====================================================
   CARD CATEGORÍA
===================================================== */
.category-card {
  background: #fff;
  border-radius: 18px;
  padding: 0px 0px 22px; /* menos aire */
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

.category-card img {
  width: 100%;
  height: 200px;              /* más altura real */
  object-fit: cover;
  margin-bottom: 10px;        /* menos separación */
    border-radius: 18px;
}

.category-card h3 {
  font-size: 15px;
  margin-bottom: 14px;
}

/* CTA */
.category-cta,
.category-disabled {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
}

.category-cta {
  background: #f2f2f2;
  color: #333;
  transition: background .3s ease, color .3s ease;
}

.category-card:hover .category-cta {
  background: var(--color-primary);
  color: #fff;
}

/* Desactivado */
.category-disabled {
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
}



/* =====================================================
   HERO SUBCATEGORÍA (MULTICOLOR)
===================================================== */
.subcategory-hero {
    position: relative;
    padding: 50px 20px 20px 20px;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.subcategory-hero h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.subcategory-hero p {
  font-size: 18px;
  color: #666;
  margin: 20px 0px;
}

/* ===== HERO CATEGORÍA ===== */

.category-hero {
  position: relative;
  padding:60px 20px 60px;
  text-align: center;
  overflow: hidden;
    background:
    radial-gradient(circle at 50% 0%, rgba(255, 0, 130, 0.05), transparent 60%), 
	linear-gradient(180deg, #e6007d00 0%, #e6007e08 100%);

}
/* estado inicial */
.hero-title,
.category-hero-inner p,
.subcategory-meta {
  opacity: 0;
  transform: translateY(25px);
}

/* animación */
.category-hero.visible .hero-title {
  animation: heroFadeUp .6s ease forwards;
}

.category-hero.visible .category-hero-inner p {
  animation: heroFadeUp .6s ease forwards .15s;
}

.category-hero.visible .subcategory-meta {
  animation: heroFadeUp .6s ease forwards .3s;
}

/* keyframe */
@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* tipografía premium */
.hero-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 15px;
}

.hero-desc {
  max-width: 720px;
  margin: 0 auto 20px;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
}

.hero-breadcrumbs {
  font-size: 13px;
  color: #999;
}

/* animación */
@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================
   GRID MULTICOLOR
===================================================== */
.subcategory-products {
  padding: 30px 20px;
}

.products-grid-multicolor {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  justify-content: center;
}

/* =====================================================
   CARD PRODUCTO MULTICOLOR
===================================================== */
.product-multicolor-card {
  background: #fff;
  border-radius: 18px;
  padding: 0px 0px 24px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(40px) scale(.94);

  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .6s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease;
}


/* cuando aparece */
.product-multicolor-card.visible  {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.product-multicolor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

/* Imagen llena el área (sin bordes blancos) */
.product-multicolor-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  margin-bottom: 14px;
  margin-top: 14px;
  padding: 0px 8px;
}

.product-multicolor-card h3 {
  font-size: 15px;
  margin-bottom: 14px;
}

/* CTA */
.product-cta,
.product-disabled {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
}

.product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;

  background: rgba(230, 0, 125, 0.08); /* visible en reposo */
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);

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

/* Hover DIRECTO en el botón */
.product-cta:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(230, 0, 125, 0.25);
  transform: translateY(-1px);
}

.product-multicolor-card:hover .product-cta {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(230, 0, 125, 0.25);
  transform: translateY(-1px);
}

.product-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 13px;
  background: #f1f1f1;
  color: #aaa;
  cursor: not-allowed;
}

.product-multicolor-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 26px;
  border-radius: 999px;

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

  background: rgba(230, 0, 125, 0.1);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);

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

/* Hover real */
.product-multicolor-card a:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(230, 0, 125, 0.25);
  transform: translateY(-1px);
}

/* Botón desactivado (si es span o botón sin href) */
.product-multicolor-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 20px;
  border-radius: 999px;

  font-size: 13px;
  background: #eee;
  color: #000;
  cursor: not-allowed;
}




/* =====================================================
   FICHA DE PRODUCTO
===================================================== */
.product-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* HERO */
.product-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  margin-bottom: 30px;
}

/* GALERÍA */


/* BADGE */

.badge-new{
    position: absolute;
    z-index: 30 !important;
    top: 20px;
    right: 16px;
    background: linear-gradient(135deg, #fff7d6 0%, #ffe9a8 100%) !important;
    color: #d66a00 !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercas;
    padding: 10px 16px;
    border: 1px solid rgba(255, 183, 3, .38);
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(214, 106, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
    pointer-events: none;
    line-height: 1;
}
}

/* INFO */
.product-info h1 {
  font-size: 32px;
  margin-bottom: 10px;
}

.product-info .ref {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}

.product-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tag {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* corregidas */
.tag.brillo {
  background: #e7f1ff;   /* azul suave */
  color: #1c7ed6;
}

.tag.multicolor {
  background: #fff4cc;   /* amarillo suave */
  color: #e67700;
}

.tag.new {
  background: #fff4cc;
  color: #f08c00;
}

/* nuevas */
.tag.rellena {
  background: #ffe3e3;   /* rojo suave */
  color: #c92a2a;
}

.tag.azucar {
  background: #ffe3ef;   /* rosa suave */
  color: #d63384;
}

.tag.pica {
  background: #e6fcf5;   /* verde suave */
  color: #099268;
}

.tag.mini {
  background: #fff0e6;   /* naranja suave */
  color: #e8590c;
}

.tag.regaliz {
  background: #ecfccb;   /* verde lima suave */
  color: #5c940d;
}

.tag.bolsa100g {
  background: #f3e8ff;   /* lila suave */
  color: #7048e8;
}

.tag.tarrina {
  background: #ffe3e3;   /* rojo suave */
  color: #a61e1e;
}
.product-description {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* ACCIONES */
.product-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-outline {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid #ccc;
  font-size: 14px;
  color: #333;
  align-content: center;
}

.btn-primary {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
}

/* BLOQUES */
.product-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.product-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* ACCORDION */
.accordion {
  width: 100%;
  background: none;
  border: none;
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.panel {
  padding: 25px 20px;
}
.panel img {
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  padding: 20px 0px 0px;
  
}

/* LISTA NUTRICIONAL */
.nutrition {
  list-style: none;
  margin-top: 15px;
}

.nutrition li {
  font-size: 14px;
  margin-bottom: 6px;
}

/* LOGÍSTICA */
.logistics-img {
  width: 100%;
  max-width: 240px;
  margin-top: 20px;
  display: block;
}

/* =====================================================
   PRODUCTOS RELACIONADOS
===================================================== */
.related-products {
  margin-top: 70px;
}

.related-products h2 {
  font-size: 24px;
  margin-bottom: 30px;
  padding-left: 5px;
}

/* Grid más compacto */
.related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  align-items:stretch;
}

/* Card pequeña y elegante */
.related-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 18px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.1);
}

/* Imagen más discreta */
.related-card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* Título */
.related-card h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

/* CTA */
.related-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);

}


/* Desactivado */
.related-disabled {
  font-size: 13px;
  color: #aaa;
  cursor: not-allowed;
}
/* ============================= */
/* PRODUCTOS PAGE */
/* ============================= */

.productos-page {
  padding: 50px 40px 50px 40px;
}

.productos-title {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 10px;
}

.productos-subtitle {
  text-align: center;
  color: #777;
  margin-bottom: 60px;
}

/* GRID */
.productos-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
/* TARJETA */
.producto-card {
    position: relative;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 15px 35px rgba(0,0,0,0.06);

  /* animación inicial */
  opacity: 0;
  transform: translateY(40px) scale(.94);

  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .6s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease;
}

/* cuando aparece */
.producto-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* hover premium */
.producto-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* imagen */
.producto-card img {
  height:100%;
  display: block;
  width:100%;
  object-fit:contain;
  background:#fff;
  transition: transform .7s ease;
}

.producto-card:hover img {
  transform: scale(1.06);
}

/* contenido */
.producto-card-content {
  padding: 22px 20px 26px;
  text-align: center;
}

.producto-card-content{
  padding:18px;
  text-align:center;
  margin-top:auto;
}

.producto-card-content h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* botón */
.producto-btn {
  display: inline-block;
  background: #f2f2f2;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  transition: all .25s ease;
}

.producto-card:hover .producto-btn {
  background: var(--color-primary);
  color: #fff;
}

.producto-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.06), transparent 50%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 1;
}

.producto-card:hover::after {
  opacity: 1;
}

.producto-card-content h3{
  text-transform: uppercase;
  letter-spacing:.04em;
  font-weight:700;
}

.producto-card,
.product-multicolor-card {
  width: 100%;
  max-width: 300px;
}

/* ============================= */
/* BUSCADOR */
/* ============================= */
/* GRID RESULTADOS */
.resultado-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:25px;
  margin-top:35px;
}

/* TARJETA */
.resultado-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:.3s ease;
}

.resultado-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.resultado-img img{
  width:100%;
  height:170px;
  object-fit:cover;
}

.resultado-body{
  padding:18px;
  text-align:center;
}

.resultado-body h4{
  font-size:14px;
  font-weight:700;
  margin-bottom:6px;
}

.resultado-ref{
  display:block;
  font-size:12px;
  color:#777;
  margin-bottom:12px;
}

.resultado-btn{
  display:inline-block;
  background:#f3f3f3;
  padding:7px 16px;
  border-radius:999px;
  font-size:12px;
  color:#555;
  transition:.25s ease;
}

.resultado-card:hover .resultado-btn{
  background:var(--color-primary);
  color:#fff;
}

.finder-title{
  text-align:center;
  font-size:32px;
  font-weight:800;
  margin-bottom:10px;
  letter-spacing:-0.5px;
}

.finder-title{
  background:linear-gradient(90deg,var(--color-primary),#ff4fa0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.finder-subtitle{
  text-align:center;
  color:#666;
  max-width:620px;
  margin:0 auto 30px;
  font-size:15px;
  line-height:1.5;
}

.product-filter h2{
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 25px;
}

.product-filter p{
  color:#666;
  margin-bottom:30px;
}

/* CONTENEDOR */
.product-filter{
  padding: 50px;
  background: #0c0d0e00;
  text-align: center;
}

/* HEADER */
.filter-header h2{
  font-size: 34px;
  font-weight: 800;
  color: var(--color-primary);
}

.filter-header p{
  margin-top: 12px;
  color: #666;
  font-size: 16px;
}

/* CONTROLES */
.filter-controls{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 35px;
  flex-wrap: wrap;
}

/* INPUT BUSCADOR */
.filter-search input{
  width: 320px;
  padding: 14px 18px;
  border-radius: 40px;
  border: 1px solid #ddd;
  font-size: 15px;
  outline: none;
  transition: all .25s ease;
  background: #fff;
}

.filter-search input:focus{
  border-color: var(--color-primary);
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* SELECT */
.filter-select select{
  padding: 14px 22px;
  border-radius: 40px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: all .25s ease;
}

.filter-select select:hover{
  border-color: var(--color-primary);
}


.resultado-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
/* RESULTADOS GRID */
.resultado-grid{
  margin-top: 45px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 25px;
}

.resultado-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:.35s ease;
}

.resultado-card:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.resultado-img img{
  width:100%;
  height:190px;
  object-fit:cover;
}

.resultado-body{
  padding:18px;
  text-align:center;
}

.resultado-body h4{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
}

.resultado-ref{
  display:block;
  color:#777;
  font-size:13px;
  margin-bottom:12px;
}

.resultado-btn{
  display:inline-block;
  padding:7px 18px;
  border-radius:999px;
  background:#f3f3f3;
  font-size:13px;
  transition:.25s ease;
}

.resultado-card:hover .resultado-btn{
  background: var(--color-primary);
  color:#fff;
}

.resultado-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.resultado-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.resultado-body{
  padding: 18px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resultado-body{
  padding: 18px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.filtered-results{
  max-width: 1280px;
  margin: 40px auto 0;
  padding: 0 24px; /* margen lateral */
}

.resultado-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.resultado-img{
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #fff;
}

.resultado-img img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.resultado-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.resultado-body{
  padding: 18px 20px 22px;
  text-align: center;
}


.load-more-wrapper{
text-align:center;
margin-top:40px;
}

#loadMoreProducts{
background:linear-gradient(135deg,#e6007e,#ff4fa3);
border:none;
padding:14px 28px;
border-radius:30px;
color:#fff;
font-weight:600;
cursor:pointer;
transition:.3s ease;
}

#loadMoreProducts:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(230,0,126,.25);
}

#loadMoreProducts:disabled{

background:#dcdcdc;
color:#777;
cursor:default;

transform:none;
box-shadow:none;

}

.no-more-products{
text-align:center;
margin-top:30px;
color:#888;
font-size:14px;
}


/* ============================= */
/* FORZAR ESTILO EXACTO PRODUCTOS */
/* ============================= */

.productos-title {
  text-align: center;
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.productos-subtitle {
  text-align: center;
  color: #777;
  margin-bottom: 70px;
  font-size: 16px;
}

.subcategory-meta{
  margin-top:12px;
  font-size:13px;
  color:#999;
}
/* ===============================
   TARJETA PRODUCTO CATEGORIA PRO
================================ */

.product-card-image{
  height: 210px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:#fff;
}

.product-card-image img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  padding: 10px;
  transition: transform .6s ease;
}

.product-multicolor-card:hover img{
  transform: scale(1.06);
}

.product-card-body{
  padding:18px 20px 24px;
  text-align:center;
}

.product-card-body h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
}

.product-ref{
  display:block;
  font-size:12px;
  color:#888;
  margin-bottom:10px;
}

.product-excerpt{
  font-size:13px;
  color:#666;
  padding: 0px 10px;
  line-height:1.4;
  margin-bottom:16px;
  min-height:36px;
}

.product-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 24px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  background:rgba(230,0,125,.08);
  color:var(--color-primary);
  border:1.5px solid var(--color-primary);
  transition:.25s ease;
}

.product-multicolor-card:hover .product-cta{
  background:var(--color-primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(230,0,125,.25);
}

/* referencia */
.product-ref{
  display:block;
  font-size:12px;
  color:#999;
}

/* descripción */
.product-excerpt{
  font-size:13px;
  color:#666;
  line-height:1.4;
  margin-bottom:14px;
  min-height:36px;
}

.product-new{
position:absolute;
z-index:30 !important;
top:16px;
right:16px;
background:linear-gradient(135deg, #fff7d6 0%, #ffe9a8 100%) !important;
color:#d66a00 !important;
font-weight:700;
font-size:11px;
letter-spacing:.06em;
text-transform:uppercase;
padding:8px 14px;
border:1px solid rgba(255,183,3,.38);
border-radius:999px;
box-shadow:0 8px 20px rgba(214,106,0,.16), inset 0 1px 0 rgba(255,255,255,.8);
pointer-events:none;
line-height:1;
}

.product-new::before{
content:"";
width:6px;
height:6px;
margin-right:7px;
border-radius:50%;
background:#ff8a00;
box-shadow:0 0 0 4px rgba(255,138,0,.14);
}

/* ============================= */
/*        PRODUCTO FINAL         */
/* ============================= */
.single-productos .product-hero {
  padding: 40px 0px 20px 0px;
}

.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.product-gallery {
  position: relative;
  transition: transform .4s ease;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
  display: flex;
  align-items:center;
  justify-content: center;
  /* aspect-ratio:1/1; */
}


.product-gallery img {
  object-fit: contain;
  width:100%;
  height:100%;
  max-width: 380px;
  margin: auto;
  display: block;
  position: relative;
  padding: 10px 0;
  
  transition:
transform .45s cubic-bezier(.22,.61,.36,1),
filter .35s ease;

transform-origin:center center;
}

.product-gallery:hover img{
transform:scale(1.08);
filter:brightness(1.03) contrast(1.03);
}

.product-gallery:hover {
  transform: translateY(-4px);
}

.product-badge-new {
  position: absolute;
  top: 18px;
  right: 18px;
  background: linear-gradient(135deg,#ffb400,#ff8a00);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: .5px;
}

.product-title {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 8px;
}

.product-ref {
  font-size: 13px;
  color: #999;
  letter-spacing: .6px;
}

.product-tags span {
  background: #f3f3f3;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.product-tags .tag-primary {
  background: rgba(255,0,120,.1);
  color: var(--color-primary);
}

.product-description {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin: 20px 0 26px;
  max-width: 520px;
}

.product-description {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin: 20px 0 26px;
  max-width: 540px;
  line-height: 1.65;
  font-size: 16px;
  color: #555;
}

.product-ctac {
  background: linear-gradient(135deg, var(--color-primary), #ff4fa3);
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  transition: all .25s ease;
}

.product-ctac:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 30px rgba(255,0,120,.35);
}


/* contenedor de iconos */
.product-certifications{
  position:absolute;
  left:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index: 2;
}

.product-certifications img {
  height: 65px;
  width: auto;
  opacity: .9;
  transition: .25s ease;
}

.product-certifications img:hover {
  opacity: 1;
  transform: scale(1.08);
}

.product-certifications img{
  height: 64px;
  width: auto;
  padding: 6px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.product-certifications img:hover{
  transform: scale(1.08);
}

.product-info-box {
  background: #fff;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

.product-info-box {
  background: #fff;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

.product-info-box h3 {
  font-size: 20px;
  margin-bottom: 14px;
}

.product-hero,
.product-info-box,
.related-products {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp .6s ease forwards;
}

.product-info-box { animation-delay: .15s; }
.related-products { animation-delay: .3s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-extra{
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 30px;
}

/* CONTENEDOR */
.product-extra{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  margin-top:30px;
}

.product-box{
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
  overflow: hidden;
}


/* TARJETAS */
.product-box{
  background:#fff;
  border-radius:22px;
  padding:32px;
  box-shadow:0 15px 35px rgba(0,0,0,0.05);
  transition:.35s ease;
}

.product-box:hover{
  transform: translateY(-4px);
  box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

/* TITULOS */
.product-box-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:18px;
  color:#111;
  position:relative;
}

.product-box-title::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:0;
  width:36px;
  height:3px;
  background:var(--color-primary);
  border-radius:3px;
}

/* TEXTO */
.product-box p{
  color:#555;
  line-height:1.7;
  margin-bottom:12px;
}

.product-box strong{
  color:#111;
  font-weight:600;
}

/* LISTAS */
.product-box ul{
  padding-left:18px;
  margin-top:10px;
}

.product-box li{
  margin-bottom:10px;
  color:#555;
}

/* LOGISTICA */
.logistics-img{
  margin-top:20px;
  max-width:220px;
  display:block;
}

/* alineación del bloque logística */
.product-box:last-child{
  text-align:left;
}

.product-box:last-child p{
  margin-bottom:10px;
}

.related-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  min-height:260px;
}

.related-card img{
  width:100%;
  height:140px;
  object-fit:contain;
  display:block;
  margin:auto;
}

.related-card h3{
  font-size:15px;
  font-weight:700;
  text-align:center;
  margin:12px 10px 8px;
  min-height:38px; /* mantiene altura uniforme */
}

.related-link{
  display:inline-block;
  margin-top:auto;
  padding:10px 22px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  color:var(--color-primary);
  border:2px solid var(--color-primary);
  transition:.25s ease;
}

/* hover */
.related-card:hover .related-link{
  background:var(--color-primary);
  color:#fff;
}

.related-card{
  background:#fff;
  border-radius:18px;
  padding:18px 16px 20px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:.3s ease;
}

.related-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}



.related-products h2{
  text-align:center;
  font-size:28px;
  font-weight:800;
  margin-bottom:34px;
  position:relative;
}

.related-products h2{
  text-align:center;
  font-size:28px;
  font-weight:800;
  margin-bottom:34px;
  position:relative;
}

.related-products{
  max-width:1200px;
  margin:0 auto;
  padding:80px 20px 10px;
}

#loadMoreCategory {
  background: linear-gradient(135deg,#e6007e,#ff4fa3);
  border: none;
  padding: 14px 28px;
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 60px;
  cursor: pointer;
  transition: .3s ease;
}

#loadMoreCategory:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(230,0,126,.25);
}

#loadMoreCategory:disabled {
  background: #dcdcdc;
  color: #777;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.TyagGW_tableContainer table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    font-family: Inter, sans-serif;
}

/* Cabecera */
.TyagGW_tableContainer thead tr {
    background: linear-gradient(135deg, #d1007a, #ff2fa0);
}

.TyagGW_tableContainer thead th {
    padding: 18px 20px;
    font-weight: 700;
    font-size: 16px;
    color: white;
    text-align: left;
}

/* Filas */
.TyagGW_tableContainer tbody tr {
    border-bottom: 1px solid #edf2f7;
    transition: background 0.2s ease;
}

.TyagGW_tableContainer tbody tr:nth-child(even) {
    background: #f8fafb;
}

.TyagGW_tableContainer tbody tr:hover {
    background: #f8eef7;
}

/* Celdas */
.TyagGW_tableContainer tbody td {
    padding: 14px 20px;
    color: #333;
}

/* Columna de valores alineada a la derecha */
.TyagGW_tableContainer tbody td:last-child,
.TyagGW_tableContainer thead th:last-child {
    text-align: right;
    font-weight: 600;
    color: #2d7d46;
}

/* CALORÍAS MÁS LEGIBLES */
.TyagGW_tableContainer thead th:last-child {
    text-align: right;
    color: rgba(255,255,255,0.95);
    font-size: 17px;
    letter-spacing: 0.2px;
}

/* FILAS */
.TyagGW_tableContainer tbody tr:nth-child(even) {
    background: #f7f8fa;
}

.TyagGW_tableContainer tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #eceff3;
    font-size: 15px;
}

/* VALORES EN MAGENTA */
.TyagGW_tableContainer tbody td:last-child {
    text-align: right;
    font-weight: 700;
    color: #d1007a;
}

/* RESPONSIVE */
@media(max-width:900px){
  .product-extra{
    grid-template-columns:1fr;
  }
}
/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px){
  .product-extra{
    grid-template-columns: 1fr;
  }
  .product-gallery {
	max-width: 650px;

  }
  .product-hero{
		justify-items:center;
	align-items: center;
  }
}

@media (max-width:900px){

.product-gallery:hover img{
transform:none;
filter:none;
}
.load-more-wrapper{
    margin-bottom: 40px;
}
}

@media (min-width: 1200px) {
  .product-hero {
    grid-template-columns: 1.05fr 0.95fr;
  }

}
  
@media (max-width: 768px) {

  .product-title {
    font-size: 26px;
  }

  .product-description {
    font-size: 14px;
  }

  .product-gallery {
    padding: 20px;
  }
  
  .single-productos .product-hero {
    padding: 20px 0px 20px 0px;
}
  
.product-hero {
    margin-bottom: 5px;
}

/* Imagen más discreta */
.related-card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 10px;
}

}

@media (max-width: 600px) {
  .products-hero h1 {
    font-size: 28px;
    font-weight: 700;
  }

  .category-card img {
    height: 170px;      /* no cambia */
    object-fit: cover;
  }
  
  .product-filter{
  padding: 0 20px;
  }
}

/* responsive */
@media (max-width: 768px) {
  .products-hero {
    padding: 20px 20px 30px;
    font-size: 25px;
  }

.category-hero {
  padding: 40px 20px;
}
  .products-hero p {
    font-size: 15px;
    font-weight: 500;
  }
  .hero-badges span {
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 550;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
}
@media (max-width: 768px) {

  .producto-card:hover {
    transform: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }
.TyagGW_tableContainer tbody td {
    padding: 5px 20px;
    color: #333;
}

.TyagGW_tableContainer thead th {
    padding: 10px 15px;
    
}
}

/* =====================================================
   RESPONSIVE MULTICOLOR
===================================================== */
@media (max-width: 600px) {
  .subcategory-hero h1 {
    font-size: 32px;
  }

  .product-multicolor-card img {
    height: 190px;
  }
  
  .hero-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 15px;
}
  
  .category-hero-inner p {
      font-size: 14px;
}
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .product-hero {
    grid-template-columns: 1fr;
    gap:25px;
  }
 .product-info h1 {
         font-size: 1.8em;
 }
 
 .product-tags {
    margin-top: 5px;
}

.product-info .ref {
    font-size: 14px;
    color: #999;
    margin-left: 1px;
}
  .product-extra {
    grid-template-columns: 1fr;
  }

}


/* RESPONSIVE */
@media (max-width: 768px) {
  .productos-hero {
    height: 300px;
    padding: 0 20px;
  }

  .productos-hero h1 {
    font-size: 25px;
  }

  .productos-hero p {
    font-size: 15px;
  }
  
  .product-actions
 {
    justify-content: center;
}
}

/* responsive */
@media (max-width: 768px) {
  .productos-hero {
    height: 360px;
    padding: 0 20px;
  }

  .productos-hero h1 {
    font-size: 30px;
  }

  .productos-hero p {
    font-size: 15px;
  }
}

@media (max-width: 1100px){
  .resultado-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .productos-grid {
  grid-template-columns: repeat(4, 1fr);
  }
.products-grid-multicolor {
  grid-template-columns: repeat(3, 1fr);
  }

.related-grid{
  grid-template-columns:repeat(3,1fr);
}
.product-extra{
    grid-template-columns: repeat(1,1fr);
}
}

@media (max-width: 850px){
  .resultado-grid{
    grid-template-columns: repeat(2, 1fr);
  }
    .productos-grid {
  grid-template-columns: repeat(3, 1fr);
}
  .products-grid-multicolor {
  grid-template-columns: repeat(2, 1fr);
  }
    .related-grid{
  grid-template-columns:repeat(2,1fr);
}
}

@media (max-width: 700px){
  .productos-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .related-grid{
  grid-template-columns:repeat(1,1fr);
}

.product-box p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 12px;
    font-size: 14px;
}

.panel {
    padding: 15px 2px;
}

.breadcrumb {
    padding: 5px 0px 0px 10px;
}

.products-hero {
  min-height: 280px;
}

.hero-badges span {
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 550;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.05);
}
}

@media (max-width: 480px){
  .resultado-grid{
    grid-template-columns: repeat(2, 1fr);
  justify-items:center;
  gap: 15px;
  }
  
  .resultado-img {
    height: 150px;
    padding: 10px;
}
.resultado-body {
    padding: 2px 20px 22px;
    text-align: center;
}

.resultado-body h4
 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.resultado-card {
    padding: 10px;
}

.filter-header h2
 {
    font-size: 24px;
    font-weight: 700;
}

.filter-header p
 {
    margin-top: 12px;
    color: #666;
    font-size: 14px;
}

.filtered-results{
    margin: 25px auto 0;
    padding: 0 2px;
}

    .productos-grid {
 grid-template-columns: repeat(2, 1fr);
  justify-items:center;
  gap: 15px;
}

.productos-page{
    padding: 40px 20px 60px;
}

.subcategory-products {
    padding: 20px;
}

.b-category {
    margin: 20px auto 15px;
    padding: 0 20px;
    font-size: 14px;
}

    .category-hero{
        padding: 40px 20px 20px;
    }
    
    #loadMoreCategory {
    margin-bottom: 30px;
}
  .products-grid-multicolor {
  grid-template-columns: repeat(2, 1fr);
  justify-items:center;    
  gap: 15px;
  }
  
  .product-multicolor-card{
      padding:10px;
  }
  
.product-multicolor-card img{
        height: 120px;
    }
    
    .product-multicolor-card h3 {
    font-size: 14px;
    margin-bottom: 14px;
}

.product-excerpt {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
    margin-bottom: 14px;
    min-height: 36px;
}

}

/* =========================
   SCROLL REVEAL
========================= */

.reveal{
  opacity:0;
  transform:translateY(50px);
  transition:all .8s cubic-bezier(.16,.84,.44,1);
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* --- FIX MOBILE: DISABLE PRODUCTS ANIMATIONS --- */
@media (max-width: 1024px) {
  .products-hero-inner, .category-hero.visible .hero-title, 
  .category-hero.visible .category-hero-inner p, .category-hero.visible .subcategory-meta,
  .product-multicolor-card, .producto-card, .product-hero, .product-info-box, .related-products {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Desactivar zoom en galerías y hover de botones */
  .product-gallery:hover img, .product-multicolor-card:hover img, .product-cta:hover {
    transform: none !important;
    filter: none !important;
  }
}

.related-products{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
}

.related-products h2{
    text-align:center;
    margin-bottom:40px;
}

.related-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(250px,1fr)) !important;
    gap:30px;
    width:100%;
}

.related-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    background:#fff;
    border-radius:20px;
    padding:24px;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.related-card img{
    width:100%;
    height:220px;
    object-fit:contain;
}

.related-card h3{
    text-align:center;
    margin:15px 0;
}

.related-link{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:12px 28px;
    border:2px solid var(--color-primary);
    border-radius:999px;
}

/* Tablet */
@media (max-width:1024px){
    .related-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

/* Móvil */
@media (max-width:768px){
    .related-grid{
        grid-template-columns:1fr !important;
    }
}

@media (max-width: 768px){

.floating-social{
    display:none !important;
}

}