:root {
    --primary: #0d6efd;
    --text: #222;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f8fafc
}

* {
    box-sizing: border-box
}




body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto;
    color: var(--text);
    background: var(--bg)
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .25s ease
}
header.site-header {
  height: 100px; /* Adjust to your desired height */
}
.site-header.scrolled {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    font-weight: 700
}

.menu.desktop {
    display: none
}


.hero-title { display:block; }
.hero-title-img{
  display:block;
  max-width: 100%;
  height: auto;
  /* Ajustes visuales opcionales */
  margin: 0;
  /* Si quieres limitar el ancho en pantallas muy grandes: */
  /* width: clamp(240px, 40vw, 720px); */
}


@media(min-width:768px) {
    .menu.desktop {
        display: flex;
        gap: 18px;
        align-items: center
    }

    
}

.nav-link {
    position: relative;
    padding: 8px 2px;
    color: #334155;
    text-decoration: none
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--primary);
    transition: width .25s ease
}

.nav-link:hover::after {
    width: 100%
}

.btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    transition: transform .15s ease, box-shadow .15s
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(13, 110, 253, .18)
}

.btn-outline {
    background: #fff;
    color: #111;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none
}

.btn-cart {
    display: inline-flex
}

.hamburger {
    display: grid;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: #0f172a;
    transition: transform .25s, opacity .25s
}

.hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg)
}

.hamburger.active span:nth-child(2) {
    opacity: 0
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg)
}

@media(min-width:768px) {
    .hamburger {
        display: none
    }
}

.menu.mobile {
    display: grid;
    gap: 8px;
    padding: 10px 16px;
    text-align:center;
    background-color: #fff;
    border-top: 1px solid var(--border);
    transform: scaleY(0);
    opacity: 0;
    transform-origin: top;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s
}

.menu.mobile.open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto
}

.menu.mobile .nav-link {
    padding: 8px 0
}

.footer {
    margin-top: 32px;
    background: #fff;
    border-top: 1px solid var(--border)
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 0
}

.footer-grid h3 {
    margin: 0 0 8px
}

.footer .list {
    margin: 0;
    padding-left: 18px
}

.footer .link {
    color: #000;
    text-decoration: none
}

.footer .link:hover {
    text-decoration: underline
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding: 12px 0;
    color: #64748b
}

@media(min-width:768px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.page-title {
    margin: 16px 0 8px
}

.muted {
    color: var(--muted)
}

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    align-items: center;
    margin: 28px 0
}

.hero-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px
}

.actions {
    display: flex;
    gap: 12px;
    margin-top: 12px
}

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

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px
}

.price {
    font-weight: 12px
}

.filters {
    display: grid;
    grid-template-columns: 1fr 220px 220px auto;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin: 16px 0
}

.filters input,
.filters select {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px
}

.product {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 24px 0
}

.product-media img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff
}

.product-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px
}

.product-actions input {
    width: 90px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px
}

.cart {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px
}

.cart .item {
    display: grid;
    grid-template-columns: 1fr 90px 120px auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border)
}

.cart .item:last-child {
    border-bottom: none
}

.cart .total {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 12px;
    font-weight: 700
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
}

.brand-pill {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.breadcrumb {
    font-size: 14px;
    color: var(--muted);
    margin: 12px 0
}

.breadcrumb a {
    color: inherit
}

@media(min-width:768px) {
    .hero {
        grid-template-columns: 1.1fr .9fr
    }

    .grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .product {
        grid-template-columns: 1.1fr .9fr
    }

    .brand-grid {
        grid-template-columns: repeat(6, 1fr)
    }
}

.reveal-up {
    opacity: 0;
    transform: translateY(10px);
    animation: reveal .5s ease forwards
}

.reveal-up.delay-1 {
    animation-delay: .1s
}

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



/* === Botones en una sola fila con espacios no muy anchos === */
.actions-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;              /* espacio compacto entre “Ver” y “WhatsApp” */
}
.actions-row--tight{ gap: 8px; } /* aún más compacto si lo aplicas */

/* === Botón de WhatsApp básico === */
:root{ --wa:#25D366; }
.btn-wa{
  background: var(--wa);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
transition: transform .15s ease, box-shadow .15s ease;
}
.btn-wa:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(37,211,102,.25);
}

.btn-wa--circle{
  width: 44px;            /* ajusta a 36 / 40 / 48 si lo quieres distinto */
  height: 44px;
  padding: 0;             /* importante: sin padding para que sea un círculo real */
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(37,211,102,.25);
}

.btn-wa .wa-icon{ width: 28px; height: 28px; display: inline-block; }

/* === Cards con animaciones atractivas para destacar el producto === */
/* - elevación + brillo de borde + zoom suave en imagen */
.card.card--fx{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.card--fx:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
  border-color: rgba(13,110,253,.35); /* brillo sutil con el color primario */
}
.card.card--fx::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% -10%, rgba(13,110,253,.08), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}
.card.card--fx:hover::after{ opacity: 1; }

.card.card--fx .card-img{
  width: 100%;
  aspect-ratio: 16/9;            /* reduce altura => se percibe más ancho */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: transform .35s ease;
}
.card.card--fx:hover .card-img{
  transform: scale(1.03);        /* zoom suave al pasar el mouse */
}

/* Título y precio con pequeños ajustes */
.card-title{ display:block; margin-top:10px; margin-bottom:4px; }
.price{ font-weight:700; }       /* corrige font-weight inválido */
.tax-note{ font-size: 12px; color:#6b7280; margin-left:6px; }

/* (Opcional) Grilla de destacados más ancha en desktop */
#homeFeatured{
  display: grid;
  grid-template-columns: 1fr;    /* móvil: 1 por fila */
  gap: 18px;
}
@media (min-width: 768px){
  #homeFeatured{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* desktop: 2 por fila => más ancho por card */
  }
}


/* Fila de acciones compacta para Ver + WhatsApp */
.actions-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.actions-row--tight{ gap:8px; }


.muted{
    text-align:left;
}



.btn-wa:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(37,211,102,.25); }




/* === Paginación visual para Tienda === */
.pagination{
  margin: 16px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Contenedor del pager */
.pager{
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Botón de página */
.page-btn{
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: #0f172a;
  border-radius: 10px;
  cursor: pointer;
  font: 500 14px/1 system-ui,-apple-system,Segoe UI,Roboto;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.page-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.page-btn[disabled],
.page-btn.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Números */
.page-numbers{
  display: flex;
  gap: 6px;
}
.page-btn.is-active,
.page-btn[aria-current="page"]{
  background: var(--primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 18px rgba(13,110,253,.18);
}

/* Elipsis */
.pager .dots{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  color: #64748b;
}

/* Texto auxiliar "Página X de Y" */
.pager-info{
  color: #64748b;
  font-size: 14px;
}

/* Responsive: más grandes en móvil */
@media (max-width: 480px){
  .page-btn{ min-width: 34px; height: 34px; padding: 0 8px; }
  .page-numbers{ gap: 4px; }
}




/* Grid básica productos (resumen) */
.grid{ display:grid; grid-template-columns:repeat(1,1fr); gap:16px }
@media(min-width:768px){ .grid{ grid-template-columns:repeat(3,1fr) } }
.price{ font-weight:700 }
.tax-note{ font-size:12px; color:#6b7280; margin-left:6px }

/* === Marcas: galería de logos con animación y responsive === */
.brand-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
@media(min-width:480px){ .brand-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(min-width:768px){ .brand-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) } }
.brand-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:grid; place-items:center; height:84px; transition:transform .25s, box-shadow .25s, border-color .25s; opacity:0; animation:brandPop .45s ease forwards }
.brand-card:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 14px 26px rgba(0,0,0,.08); border-color:rgba(13,110,253,.22) }
.brand-card[data-i]{ animation-delay:calc(.03s * var(--i,0)) }
.brand-logo{ max-width:100%; max-height:48px; object-fit:contain; filter:saturate(.9) contrast(1); transition:filter .25s }
.brand-card:hover .brand-logo{ filter:saturate(1.1) contrast(1.05) }
@keyframes brandPop{ 0%{opacity:0; transform:translateY(8px) scale(.98)} 100%{opacity:1; transform:translateY(0) scale(1)} }







/* ---- ANIMACIÓN 3: BOUNCE-IN + FLOAT ---- */
.brand-anim--float{
  animation: brandBounceIn .6s ease-out both, brandFloat 6s ease-in-out 1s infinite;
}
@keyframes brandBounceIn{
  0%   { transform: scale(.8); opacity:0; }
  60%  { transform: scale(1.05); opacity:1; }
  100% { transform: scale(1); }
}
@keyframes brandFloat{
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-4px) }
  100% { transform: translateY(0) }
}





/* === FOOTER ECOMMERCE INTESOLTI === */
.footer-commerce{
  margin-top:60px;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border-top:1px solid var(--border);
}

/* Barra de confianza */
.footer-trust{
  background:#0f172a;
  color:#fff;
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  padding:18px 0;
}
@media(min-width:768px){
  .trust-grid{ grid-template-columns:repeat(4,1fr); }
}

/* Confianza animada */
.trust-item{
  font-weight:600;
  font-size:14px;
  text-align:center;
  animation: fadeUp .6s ease both;
}
.trust-item:nth-child(2){animation-delay:.1s}
.trust-item:nth-child(3){animation-delay:.2s}
.trust-item:nth-child(4){animation-delay:.3s}

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

/* Footer principal */
.footer-main{
  display:grid;
  gap:28px;
  padding:40px 0;
}
@media(min-width:768px){
  .footer-main{ grid-template-columns:repeat(4,1fr); }
}

.footer-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:10px;
  color:#0f172a;
}

.footer-text{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}

.footer-list{
  list-style:none;
  padding:0;
}
.footer-list li{
  margin-bottom:8px;
  font-size:14px;
  color:#334155;
}

/* Enlaces con micro-animación */
.footer-links a{
  text-decoration:none;
  color:var(--primary);
  position:relative;
}
.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:var(--primary);
  transition:width .25s ease;
}
.footer-links a:hover::after{
  width:100%;
}

/* Branding */
.footer-brand-link{
  display:inline-block;
  margin-top:10px;
  font-weight:600;
  color:var(--primary);
  text-decoration:none;
  transition:transform .2s ease;
}
.footer-brand-link:hover{
  transform:translateX(4px);
}

/* Cierre */
.footer-bottom{
  border-top:1px solid var(--border);
  background:#fff;
}
.footer-bottom .container{
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  font-size:13px;
  color:#64748b;
}
.footer-bottom a{
  color:var(--primary);
  text-decoration:none;
}
.footer-bottom a:hover{text-decoration:underline}






/* === Badge de Promoción (Destacados) === */
.card.promo {
  position: relative;
  overflow: hidden;
}

/* Ribbon diagonal */
.promo-badge {
  position: absolute;
  top: 14px;
  left: -42px;
  width: 140px;
  text-align: center;
  background: linear-gradient(135deg, #3b5cff, #18baff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 0;
  transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(81, 80, 80, 0.35);
  letter-spacing: .6px;
  z-index: 5;

  /* Animación de entrada */
  animation: promoPop .6s ease-out both;
}

/* Brillo sutil animado */
.promo-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
  );
  transform: translateX(-100%);
  animation: promoShine 2.8s ease-in-out infinite;
}

/* Hover en la card: la promo "respira" */
.card.promo:hover .promo-badge {
  transform: rotate(-45deg) scale(1.04);
}

/* Animaciones */
@keyframes promoPop {
  0%   { opacity: 0; transform: rotate(-45deg) scale(.8); }
  60%  { opacity: 1; transform: rotate(-45deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(-45deg) scale(1); }
}

@keyframes promoShine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}




.no-img {
  width: 60px;
  height: 60px;
  background: #fafafa;
  border: 1px dashed #ccc;
  font-size: 11px;
  color: #777;
  display: flex;
  align-items: center;
  justify-content: center;
}