/* ===== ESTILOS GLOBALES ===== */
:root {
  --dorado: #C8A462;
  --crema: #F4F3F1;
  --negro: #1F1E1C;
  --gris: #555555;
  --trans: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Montserrat', sans-serif;
  background: var(--crema);
  color: var(--negro);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--negro);
  letter-spacing: 0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--trans);
}

a:hover {
  color: var(--dorado);
}

img {
  max-width: 100%;
  display: block;
}

/* =========================================
   NUEVO HEADER Y MENÚ HAMBURGUESA
   ========================================= */

/* Cabecera Principal (Menú FIJO) */
.main-header {
  background-color: var(--crema); /* Asegura que tenga color de fondo */
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* CAMBIO A FIXED: Esto obliga al menú a flotar y seguirte siempre */
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box; /* Evita que el padding ensanche la barra más del 100% */
  
  z-index: 1000; /* Máxima prioridad para estar encima de todo */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


/* Ajustes del Logo */
.logo a {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--negro);
  text-decoration: none;
  letter-spacing: 0.5px;
}

/* Navegación Desktop (Pantallas grandes) */
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 25px;
}

.nav-menu a {
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  color: var(--negro);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s;
}

.nav-menu a:hover {
  color: var(--dorado);
}

/* Botón Hamburguesa (Oculto en escritorio) */
.nav-toggle {
  display: none; /* Se oculta en PC */
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}

.nav-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--negro);
  transition: all 0.3s ease;
}

/* ===== VERSIÓN MÓVIL (Responsive) ===== */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex; /* Aparece el botón */
  }

  .nav-menu {
    position: absolute;
    top: 100%; /* Se coloca justo debajo del header */
    left: 0;
    width: 100%;
    background-color: #fff; /* Fondo blanco para contraste o usa var(--crema) */
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    /* Oculto por defecto en móvil */
    display: none; 
    z-index: 999;
  }

  /* Clase que activa el menú con JS */
  .nav-menu.active {
    display: flex;
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  
  /* Animación de las rayitas a X */
  .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}


/* ===== HERO BASE ===== */
.hero {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding: 4rem 2rem;
  gap: 2rem;
}

.hero-text h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  background: linear-gradient(90deg, var(--negro), var(--dorado));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}
  /* ===== HERO IMAGE / MEDIA ===== */
.hero-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#f6f3ee;
  box-shadow:0 14px 28px rgba(0,0,0,.08);
  isolation:isolate;
  min-height:420px;
}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  aspect-ratio:4/3;
  filter:contrast(102%) brightness(98%) saturate(105%);
  transition:transform 10s ease-out;
}
.hero-media:hover img{ transform:scale(1.04); }
.hero-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,0) 45%),
    radial-gradient(140% 90% at 100% 100%,rgba(200,164,98,.18),transparent 55%);
}
.sparkle{
  position:absolute; right:18px; top:18px; width:26px; height:26px; opacity:.6;
  fill:var(--dorado);
  filter:drop-shadow(0 2px 6px rgba(200,164,98,.35));
  animation:sparkle-float 6s ease-in-out infinite;
}
@keyframes sparkle-float{
  0%,100%{transform:translateY(0) rotate(0deg);opacity:.65;}
  50%{transform:translateY(-6px) rotate(6deg);opacity:.9;}
}

.hero-text p {
  color: var(--gris);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.btn-hero {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  background: var(--dorado);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(200, 164, 98, 0.35);
  transition: var(--trans);
}

.btn-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(200, 164, 98, 0.45);
}

/* ===== Media Query para Hero (responsive) ===== */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    margin-top: 4rem;
  }
  .hero-media {
    order: -1; /* Pone la imagen primero en móvil */
    min-height: 300px;
  }
  .hero-text h1 {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }
}


/* ===== NOSOTROS ===== */
.nosotros {
padding: 5rem 2rem;
background: #fff;
border-top: 1px solid rgba(0,0,0,.05);
text-align: center;
}
.nosotros-contenido {
max-width: 900px;
margin: auto;
}
.nosotros h2 {
font-size: 2.4rem;
margin-bottom: 1rem;
}
.nosotros p {
color: #555;
line-height: 1.7;
margin-bottom: 1.2rem;
font-size: 1.05rem;
}
.btn-visit {
display: inline-block;
margin-top: 1rem;
background: #1f1e1c;
color: #fff;
padding: .9rem 1.6rem;
border-radius: 999px;
font-weight: 600;
transition: all .25s ease;
}
.btn-visit:hover {
background: var(--dorado);
color: #fff;
transform: translateY(-2px);
}

/* ===== OPINIONES (marquee infinito) ===== */
.opiniones {
padding: 3rem 0 4rem; /* Permitimos que el marquee ocupe todo el ancho */
background: #F4F3F1;
box-shadow: inset 0 6px 12px rgba(0,0,0,.05);
border-radius: 20px 20px 0 0;
overflow: hidden;
position: relative;
}
.opiniones h2 {
text-align: center;
margin-bottom: .5rem;
}
.opiniones .sub {
text-align: center;
opacity: .85;
margin-bottom: 2rem;
padding: 0 1rem;
}
.opiniones-marquee {
overflow: hidden;
position: relative;
/* Degradados en los bordes para un efecto 'fade' */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.opiniones-track {
display: flex;
gap: 1.5rem;
width: max-content;
animation: scroll-left 45s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.opiniones-track:hover {
animation-play-state: paused;
}
.opinion {
flex: 0 0 300px;
background: #fff;
border-radius: 14px;
padding: 1.2rem;
box-shadow: 0 10px 22px rgba(0,0,0,.08);
transition: transform .3s ease, box-shadow .4s ease;
}
.opinion:hover {
transform: translateY(-6px);
box-shadow: 0 14px 26px rgba(200,164,98,.25);
}
.opinion .stars {
background: linear-gradient(90deg,#C8A462,#E7CA8E,#C8A462);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.2rem;
letter-spacing: .05em;
}
.opinion p {
margin: .25rem 0 .75rem;
color: #333;
}
.opinion .autor {
font-weight: 600;
opacity: .9;
}
@media (max-width:600px){
.opinion {
  flex: 0 0 260px;
  padding: 1rem;
}
}
.opiniones-cta {
text-align: center;
margin-top: 2rem;
padding: 0 1rem;
}
.btn-review {
display: inline-block;
padding: .9rem 1.4rem;
border-radius: 999px;
background: var(--dorado);
color: #fff;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 22px rgba(200,164,98,.35);
transition: transform .15s ease, box-shadow .2s ease;
}
.btn-review:hover {
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(200,164,98,.45);
}
/* ===== CONTACTO + MAPA ===== */
.contacto {
padding: 4rem 1.5rem; /* Añadimos padding lateral para móvil */
}
.contacto .contacto-wrap {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}
.contacto .contacto-texto {
padding: 2.5rem;
}
.contacto h2 {
margin-bottom: 0.75rem;
}
.contacto .lead {
color: #555;
margin-bottom: 1rem;
}
.contacto-datos {
list-style: none;
color: #333;
margin: 1rem 0 1.25rem;
}
.contacto-datos li {
margin: 0.25rem 0;
line-height: 1.5;
}
.contacto .horario h3 {
font-size: 1.1rem;
margin: 0.5rem 0 0.25rem;
}
.contacto .horario p {
margin-bottom: 0.6rem;
opacity: 0.9;
}
.contacto .cta-maps {
margin-top: 1rem;
}
.contacto-mapa iframe {
width: 100%;
height: 100%;
min-height: 360px;
border: 0;
display: block;
filter: grayscale(10%) contrast(105%) brightness(100%);
transition: transform 0.4s ease;
}
.contacto-mapa iframe:hover {
transform: scale(1.02);
}
@media (max-width: 900px) {
.contacto .contacto-wrap {
  grid-template-columns: 1fr;
}
.contacto .contacto-texto {
  padding: 2rem 1.5rem;
}
.contacto-mapa iframe {
  min-height: 300px;
}
}

/* ===== FOOTER ===== */
footer {
background: #1f1e1c;
color: #f4f3f1;
padding: 1.5rem 1rem;
text-align: center;
margin-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.9rem;
}
footer a {
color: var(--dorado);
text-decoration: none;
transition: color 0.3s ease;
}
footer a:hover {
color: #fff;
}
footer .sep {
opacity: 0.5;
padding: 0 0.5rem;
}
/* ===== WHATSAPP FLOTANTE ===== */
.whatsapp-float{
position: fixed; right: 18px; bottom: 18px; z-index: 9999;
width: 56px; height: 56px; border-radius: 50%;
background: #25D366;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 22px rgba(0,0,0,.20);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.whatsapp-float:hover{
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(0,0,0,.25);
filter: saturate(115%);
}
.whatsapp-float svg{ width: 28px; height: 28px; fill: #fff; display: block; }

/* ===== REVEAL (aparición suave al hacer scroll) ===== */
.reveal{
opacity: 0;
transform: translateY(14px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal.show{
opacity: 1;
transform: none;
}

/* ===== ESTADOS DE FOCO (accesibilidad) ===== */
a:focus-visible, button:focus-visible, .btn-hero:focus-visible, .btn-visit:focus-visible, .btn-review:focus-visible{
outline: 2px solid var(--dorado);
outline-offset: 2px;
border-radius: 8px;
}

/* ===== REDUCE MOTION ===== */
@media (prefers-reduced-motion: reduce){
*{ scroll-behavior: auto; }
.hero-media img, .btn-hero, .opinion, .whatsapp-float, .opiniones-track { 
  transition: none; 
  animation: none;
}
}
/* Paleta base (ajustable a tu tema) */
:root{
  --crema: #F6F0E7;
  --dorado: #C8A462;
  --negro: #1F1E1C;
  --blanco: #FFFFFF;
  --borde: rgba(0,0,0,.08);
  --sombra: 0 8px 24px rgba(0,0,0,.08);
  --sombra-hover: 0 12px 32px rgba(0,0,0,.14);
}

/* Sección */
#categorias.section { padding: 64px 20px; background: var(--blanco); }
#categorias .categorias-header { text-align:center; margin-bottom: 22px; }
#categorias .categorias-header h2 {
  font-family: "Playfair Display", serif;
  font-weight: 600; letter-spacing: .2px; color: var(--negro);
  font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 6px;
}
#categorias .categorias-header .sub {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  color: #6b6b6b; font-size: 0.98rem; margin: 0;
}

/* Grid de tarjetas */
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 14px; align-items: stretch; justify-items: stretch;
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 1100px){ .categorias-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px){ .categorias-grid { grid-template-columns: repeat(2, 1fr); } }

/* Tarjeta */
.cat-card {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: radial-gradient(120% 100% at 100% 0%, rgba(200,164,98,0.10) 0%, rgba(200,164,98,0.04) 50%, rgba(255,255,255,0.8) 100%), var(--blanco);
  box-shadow: var(--sombra);
  padding: 18px 16px;
  min-height: 120px;
  display: grid; place-content: center; place-items: center; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  outline: none;
  overflow: hidden;
}
.cat-card::after{ /* borde dorado suave al hover/focus */
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  border: 2px solid transparent;
}
.cat-card:hover, .cat-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
  border-color: rgba(200,164,98,0.35);
}
.cat-card:hover::after, .cat-card:focus-visible::after{
  border-color: rgba(200,164,98,0.65);
}

/* Contenido de tarjeta */
.cat-label{
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 600; letter-spacing: .3px; color: var(--negro);
  font-size: 1rem; margin-top: 8px;
}
.cat-icon{
  width: 30px; height: 30px; opacity: .9; margin-bottom: 6px;
  fill: var(--dorado);
}

/* Animación de “flotar” muy sutil y respetuosa */
@media (prefers-reduced-motion: no-preference){
  .cat-card{ animation: floaty 6s ease-in-out infinite; }
  .cat-card:nth-child(odd){ animation-delay: .2s; }
  .cat-card:nth-child(3n){ animation-delay: .4s; }
}
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

/* Aparición al entrar en viewport */
.cat-card.is-hidden{ opacity: 0; transform: translateY(8px); }
.cat-card.is-visible{ opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }
/* Resalte breve al llegar por ancla */
.highlight { box-shadow: 0 0 0 4px rgba(200,164,98,.25) inset; transition: box-shadow .6s ease; }
#cat-anillos, #cat-pendientes, #cat-collares,
#cat-pulseras, #cat-alianzas, #cat-relojes {
  padding: 80px 20px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

#cat-anillos h3, #cat-pendientes h3, #cat-collares h3,
#cat-pulseras h3, #cat-alianzas h3, #cat-relojes h3 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--negro);
  margin-bottom: 12px;
}

#cat-anillos p, #cat-pendientes p, #cat-collares p,
#cat-pulseras p, #cat-alianzas p, #cat-relojes p {
  font-family: "Montserrat", sans-serif;
  color: #444;
  max-width: 680px;
  margin: 0 auto;
  font-size: 1rem;
}
/* que nada bloquee los clics en categorías */
.hero-overlay { pointer-events: none; }
.categorias-grid, .cat-card { position: relative; z-index: 2; }
/* === ANILLOS · UI V2 (minimalista + interactiva) ======================= */
/* Usa tu paleta global ya definida en :root (crema/dorado/negro/blanco)  */

/* HERO de categoría con tipografía y layout fluidos */
.hero-categoria{
  --overlay: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.10) 100%);
  background: var(--overlay), url('imagenes/hero-joya.jpg') center/cover no-repeat;
  color:#fff; text-align:center;
  padding: clamp(3.5rem, 6vw, 7rem) 1.25rem clamp(2rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.hero-categoria::after{ /* grano dorado muy sutil */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 80% 10%, rgba(200,164,98,.12) 0%, transparent 60%),
    radial-gradient(50% 35% at 10% 30%, rgba(200,164,98,.10) 0%, transparent 70%);
  mix-blend-mode: screen;
}
.hero-categoria h1{
  font-family:"Playfair Display", serif;
  font-weight:600; letter-spacing:.2px;
  font-size: clamp(2rem, 4.2vw, 3rem);
  color: var(--crema);
  margin: 0 0 .4rem;
}
.hero-categoria p{
  font-family:"Montserrat", system-ui, -apple-system, sans-serif;
  color: #F0ECE3; opacity:.95;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  margin: 0;
}

/* GRID de productos con más “aire” y ritmo visual */
.productos-grid{
  --gap: clamp(1rem, 2.5vw, 2rem);
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 46%), 1fr));
  padding: clamp(2rem, 4.5vw, 4rem) clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, #F6F0E7 0%, #FFFFFF 100%);
}

/* Tarjeta “elevada” con detalle dorado y micro-interacciones */
.producto{
  position: relative; overflow:hidden;
  border-radius: 14px; background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change: transform, box-shadow;
  isolation: isolate; /* para pseudo-elementos */
}
.producto::before{ /* halo dorado sutil en los bordes */
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(80% 60% at 50% -10%, rgba(200,164,98,.18) 0%, transparent 60%);
  opacity:.0; transition: opacity .28s ease;
}
.producto:hover,
.producto:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  border-color: rgba(200,164,98,.35);
}
.producto:hover::before,
.producto:focus-within::before{ opacity:.75; }

/* Imagen con zoom suave y borde inferior dorado */
.producto img{
  width:100%; aspect-ratio: 4/3; object-fit: cover; display:block;
  border-bottom: 2px solid var(--dorado);
  transform: scale(1);
  transition: transform .5s ease;
}
.producto:hover img{ transform: scale(1.03); }

/* Contenido */
.producto h3{
  font-family:"Montserrat", sans-serif; font-weight:600;
  color: var(--negro);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  letter-spacing:.2px;
  margin: .95rem 1rem .25rem;
}
.precio{
  color: var(--dorado);
  font-weight: 700; letter-spacing:.2px;
  margin: 0 1rem 1.15rem;
  font-size: .98rem;
}

/* Badges (si decides añadir <span class="badge">Oro</span>) */
.badge{
  display:inline-block; margin: .25rem 1rem 0;
  padding: .18rem .55rem; border-radius: 999px;
  background: rgba(200,164,98,.12);
  border: 1px solid rgba(200,164,98,.45);
  color: #6a5527; font-size: .78rem; font-weight:600;
}

/* CTA final refinado */
.cta-final{
  text-align:center; color:#F6F0E7;
  background: radial-gradient(70% 60% at 50% 0%, rgba(200,164,98,.16) 0%, rgba(200,164,98,.05) 30%, transparent 70%), #1F1E1C;
  padding: clamp(2.2rem, 4.5vw, 4rem) clamp(1rem, 3vw, 2rem);
}
.cta-final h2{
  font-family:"Playfair Display", serif;
  color: var(--dorado);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 0 0 .4rem;
}
.cta-final p{
  margin: .5rem auto 1.4rem; max-width: 640px;
  color:#EAE6DD; font-size: clamp(1rem, 1.5vw, 1.1rem);
}
.btn-visit{
  display:inline-block; text-decoration:none;
  background: var(--dorado); color:#fff;
  padding: .85rem 1.45rem; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(200,164,98,.28);
}
.btn-visit:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200,164,98,.4); }
.btn-visit:active{ transform: translateY(0); }

/* Accesibilidad: respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .producto, .producto img, .btn-visit{ transition: none !important; }
  .producto:hover{ transform:none; }
}
/* Evita que el header tape el ancla al ir a #categorias */
#categorias { scroll-margin-top: 96px; }

/* Sutil realce para Colecciones al pasar el ratón o al enfocarlo con teclado */
.link-colecciones {
  position: relative;
}
.link-colecciones::after {
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, rgba(200,164,98,.0), rgba(200,164,98,.9), rgba(200,164,98,.0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.link-colecciones:hover::after,
.link-colecciones:focus-visible::after { transform: scaleX(1); }

/* Espaciado un poco más generoso entre items del menú en desktop */
@media (min-width: 920px){
  #menu li + li a { margin-left: 18px; }
}
/* === Header sticky minimalista con blur y transición =================== */
header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Estado al hacer scroll (se añade la clase .is-sticky desde JS) */
header.is-sticky{
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border-bottom-color: rgba(0,0,0,.08);
}

/* Ajuste de altura/respiración cuando está sticky */
header .nav-container{ 
  padding-block: 14px;             /* por si no lo tienes ya */
  transition: padding .2s ease;
}
header.is-sticky .nav-container{ padding-block: 10px; }

/* Para que al saltar a #anclas no quede tapado por el header */
[id]{ scroll-margin-top: 96px; }   /* margen general para anclas */
/* Si prefieres sólo en categorías, deja: #categorias { scroll-margin-top: 96px; } */

/* Accesibilidad: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  header, header .nav-container{ transition: none !important; }
}
/* Breadcrumbs y controles */
.breadcrumbs{max-width:1100px;margin:14px auto 0;color:#666;font-size:.92rem}
.controls-categoria .controls-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px auto 0;max-width:1100px}
.controls-categoria select{padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:#fff}

/* Tarjeta con skeleton y cinta */
.producto{display:flex;flex-direction:column}
.producto .media{position:relative;overflow:hidden;border-radius:10px 10px 0 0;background:linear-gradient(120deg,#f1eee7,#e7e2d7,#f1eee7);background-size:200% 200%;animation:shimmer 1.8s ease-in-out infinite}
.producto .media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}
.producto .media.loaded{animation:none;background:none}
.producto .media.loaded img{opacity:1}

@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.ribbon{
  position:absolute; left:10px; bottom:10px; z-index:3;
  background: rgba(200,164,98,.95); color:#fff; font-size:.78rem; font-weight:600;
  padding:.25rem .55rem; border-radius:999px; box-shadow:0 6px 16px rgba(200,164,98,.35);
}
.ribbon-top{ left:auto; right:10px; top:10px; bottom:auto; }

.producto .actions{display:flex;gap:8px;justify-content:center;margin:0 1rem 1.2rem}
.btn{padding:.7rem 1.1rem;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:#fff;text-decoration:none;color:#1F1E1C}
.btn:hover{background:#fafafa}

/* --- Ajuste final: tarjetas más bajas y elegantes --- */
.productos-grid {
  gap: clamp(0.7rem, 2vw, 1.4rem);
  padding: clamp(1.25rem, 3.5vw, 3rem) 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 45%), 1fr));
}

/* Altura reducida del área de imagen */
.producto .media img {
  aspect-ratio: 4 / 3 !important; /* antes 1/1 */
  height: 180px !important;       /* altura más compacta */
  object-fit: cover;
  transition: transform .3s ease;
}

/* Ajustar margen de texto y botones para más equilibrio */
.producto h3 {
  margin: .6rem 1rem .15rem;
  font-size: 1rem;
}
.producto .actions {
  margin: 0 1rem .9rem;
}
.producto {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* Badge más pequeño y pegado a la imagen */
.ribbon, .badge {
  transform: scale(0.9);
}
/* === Encabezado limpio y estético para categorías === */
.minimal-filtros {
  background: #F6F0E7;
  padding: 1rem 1.5rem 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
}

.minimal-filtros .breadcrumb {
  font-size: .95rem;
  color: #6b6356;
}

.minimal-filtros .breadcrumb a {
  color: #C8A462;
  text-decoration: none;
  transition: opacity .3s ease;
}
.minimal-filtros .breadcrumb a:hover { opacity: .7; }

.minimal-filtros .etiqueta p {
  font-size: 1.05rem;
  color: #1F1E1C;
  font-family: "Playfair Display", serif;
  letter-spacing: .3px;
}
/* ====== FIX BOTONES EN MÓVIL (catálogo) ====== */

/* La tarjeta empuja las acciones al fondo y mantiene alturas consistentes */
.producto{
  display: flex;
  flex-direction: column;
}

.producto .actions{
  display: flex;
  gap: .6rem;
  align-items: stretch;
  margin: .8rem 1rem 1rem;
}

/* Botones iguales, centrados y con altura táctil */
.producto .actions .btn,
.producto .actions .btn-visit{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;         /* altura mínima accesible */
  text-align: center;
  line-height: 1.1;
  width: 100%;
}

/* En pantallas pequeñas: apilar verticalmente, full width */
@media (max-width: 640px){
  .producto .actions{
    flex-direction: column;
  }
  .producto h3{ font-size: 1.05rem; }
  .producto .precio{ font-size: 1rem; }
}
/* ==== Reveal suave en scroll ==== */
.reveal { 
  opacity: 0; 
  transform: translateY(14px); 
  transition: opacity .6s ease, transform .6s ease; 
}
.reveal.in { 
  opacity: 1; 
  transform: translateY(0); 
}

/* Micro-hover sutil en tarjetas y botones */
.producto{ transition: transform .2s ease, box-shadow .2s ease; }
.producto:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.08); }
.btn, .btn-visit{ transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover, .btn-visit:hover{ transform: translateY(-1px); box-shadow: 0 8px 16px rgba(200,164,98,.25); }
/* ==== XMAS FIX PACK (sobrescribe) ==== */
:root{
  --crema:#F6F0E7; --dorado:#C8A462; --negro:#1F1E1C; --blanco:#fff;
}
body{ background: var(--crema); }

body.theme-xmas{
  --crema:#F5F2EA;
  --dorado:#D1B171;
  --acento-verde:#0F6B4D;
  --acento-rojo:#B7423C;
}

/* Base hero y orden de capas */
.hero{ position: relative; overflow: hidden; z-index: 0; }
.hero picture{ position: relative; z-index: 0; }
.hero img{ display:block; } /* evita gaps */
.hero .hero-text, .hero .sparkle, .hero .hero-overlay{
  position: relative; z-index: 3;
}
.hero .hero-overlay{ pointer-events: none; }

/* Halo cálido: por ENCIMA de la foto, debajo del texto */
body.theme-xmas .hero::after{
  content:"";
  position:absolute; inset:0;
  z-index: 1;
  pointer-events:none;
  /* SIN blend-mode para que se vea sí o sí en Safari iPad */
  background: radial-gradient(1200px 420px at 80% -20%,
              rgba(209,177,113,.38), transparent 62%);
}

/* === COPOS DORADOS ELEGANTES (tema Navidad Martínez Joyeros) === */
body.theme-xmas.snow .hero::before{
  content:"";
  position:absolute;
  inset:-10% 0 -10% 0;
  z-index:2;
  pointer-events:none;

  /* Tonos cálidos brillantes — mezcla de dorado, champán y blanco suave */
  background-image:
    radial-gradient(circle, rgba(255,240,220,0.9) 0 1.5px, transparent 2px),  /* copos champán */
    radial-gradient(circle, rgba(255,230,150,0.8) 0 2px, transparent 2.5px),  /* copos dorados */
    radial-gradient(circle, rgba(255,255,255,0.75) 0 3px, transparent 3.5px); /* copos blancos suaves */

  background-size: 180px 260px, 240px 320px, 300px 420px;
  background-repeat: repeat;
  background-position: 0 -60px, 60px -120px, 120px -90px;

  /* Movimiento sutil en distintas velocidades */
  animation: snowGold1 24s linear infinite,
             snowGold2 36s linear infinite,
             snowGold3 48s linear infinite;

  will-change: background-position;
  filter: drop-shadow(0 0 4px rgba(255,215,150,0.3)); /* brillo leve */
}

/* Distintas capas de movimiento */
@keyframes snowGold1 {
  0% { background-position: 0 -60px, 60px -120px, 120px -90px; }
  100% { background-position: 0 640px, 60px 520px, 120px 560px; }
}
@keyframes snowGold2 {
  0% { background-position: 0 -60px, 60px -120px, 120px -90px; }
  100% { background-position: 0 720px, 60px 640px, 120px 680px; }
}
@keyframes snowGold3 {
  0% { background-position: 0 -60px, 60px -120px, 120px -90px; }
  100% { background-position: 0 800px, 60px 740px, 120px 780px; }
}
/* Acentos */
body.theme-xmas .btn-visit{
  background: var(--dorado);
  border: 1px solid rgba(209,177,113,.35);
  box-shadow: 0 8px 18px rgba(209,177,113,.25);
}
body.theme-xmas .btn-visit:hover{ box-shadow: 0 10px 24px rgba(209,177,113,.35); }
body.theme-xmas .ribbon{ background: linear-gradient(90deg,var(--acento-rojo),var(--dorado)); }
/* === Detalle navideño en sección de Colecciones === */
body.theme-xmas #categorias {
  position: relative;
  padding-block: 5rem 4rem;
  background: var(--crema);
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(209,177,113,.15),
              0 0 25px rgba(209,177,113,.12);
  overflow: hidden;
}

/* Borde decorativo con luz verde-roja difuminada */
body.theme-xmas #categorias::before {
  content:"";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(15,107,77,0.4),   /* verde pino translúcido */
    rgba(183,66,60,0.45),  /* rojo vino */
    rgba(209,177,113,0.55) /* toque dorado */
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 3px;
  animation: glowXmas 6s ease-in-out infinite alternate;
  z-index: 0;
}

/* Suave animación de brillo dorado-navideño */
@keyframes glowXmas {
  0%   { opacity: .6; filter: blur(2px) brightness(1); }
  50%  { opacity: .95; filter: blur(3px) brightness(1.2); }
  100% { opacity: .6; filter: blur(2px) brightness(1); }
}

/* Acento en el título de Colecciones */
body.theme-xmas #categorias-title {
  color: var(--acento-verde);
  text-shadow: 0 0 12px rgba(183,66,60,.4);
}

body.theme-xmas .categorias-header .sub {
  color: var(--acento-rojo);
  letter-spacing: .5px;
}

/* Efecto hover navideño en las tarjetas */
body.theme-xmas .cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(15,107,77,.25),
              0 0 0 2px rgba(209,177,113,.35) inset;
}
/* Estela navideña entre hero y categorías */
body.theme-xmas .xmas-garland{
  position: relative;
  isolation: isolate;
  background: transparent;
  margin: clamp(.5rem, 2vw, 1rem) 0 -0.5rem; /* se “pega” al bloque siguiente */
}

body.theme-xmas .xmas-garland svg{
  display: block;
  width: 100%;
  height: clamp(42px, 7vw, 70px);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08))
          drop-shadow(0 2px 0 rgba(209,177,113,.15)); /* leve halo dorado */
}

/* animación sutil de respiración (opcional) */
@keyframes xmasGlow {
  0%   { filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)) drop-shadow(0 2px 0 rgba(209,177,113,.15)); }
  50%  { filter: drop-shadow(0 8px 14px rgba(0,0,0,.12)) drop-shadow(0 2px 0 rgba(209,177,113,.28)); }
  100% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)) drop-shadow(0 2px 0 rgba(209,177,113,.15)); }
}
body.theme-xmas .xmas-garland svg{ animation: xmasGlow 6s ease-in-out infinite; }
/* === Guirnalda navideña con bolitas doradas === */
body.theme-xmas .xmas-garland{
  position: relative;
  isolation: isolate;
  background: transparent;
  margin: clamp(.5rem, 2vw, 1rem) 0 -0.5rem;
}

body.theme-xmas .xmas-garland svg{
  display: block;
  width: 100%;
  height: clamp(42px, 7vw, 70px);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08))
          drop-shadow(0 2px 0 rgba(209,177,113,.15));
  animation: xmasGlow 6s ease-in-out infinite;
}

/* Efecto de “respiración” del brillo dorado */
@keyframes xmasGlow {
  0%   { filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)) drop-shadow(0 2px 0 rgba(209,177,113,.15)); }
  50%  { filter: drop-shadow(0 8px 14px rgba(0,0,0,.12)) drop-shadow(0 2px 0 rgba(209,177,113,.28)); }
  100% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)) drop-shadow(0 2px 0 rgba(209,177,113,.15)); }
}

/* Bolitas doradas con leve parpadeo */
body.theme-xmas .xmas-garland circle {
  transform-origin: center;
  animation: goldTwinkle 4s ease-in-out infinite alternate;
}

@keyframes goldTwinkle {
  0%,100% { opacity: 0.9; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(2px) scale(1.05); }
}
/* === HERO NAVIDAD LUXURY EDITION (Kodex V4.3) === */
:root{
  --xmas-red:#B3212C;
  --xmas-green:#0F6B4D;
  --xmas-gold:#D6B76E;
  --xmas-gold-hi:#F4E4B0;
  --xmas-gold-lo:#A37F43;
  --ink:#1F1E1C;
}

/* === Fix nitidez + tipografía elegante === */
.hero-title.xmas-red{
  font-family:"Playfair Display",serif;
  font-weight:600;
  font-size:clamp(2.2rem,4vw + 1rem,4.2rem);
  line-height:1.06;
  letter-spacing:.2px;
  color:var(--ink);
  text-wrap:balance;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hero-title.xmas-red .word{ display:inline-block; }

/* === BRILLA — dorado metálico animado === */
.hero-title.xmas-red .brilla{
  background:linear-gradient(
    100deg,
    #f4e4b0 0%,
    #d6b76e 20%,
    #b89045 45%,
    #f8eec5 70%,
    #d1b171 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 .05em .15em rgba(0,0,0,.15),
    0 .05em .25em rgba(255,215,125,.3);
  animation:shimmerGold 4.5s linear infinite;
  background-size:200% auto;
}
@keyframes shimmerGold{
  0%{background-position:0% center;}
  100%{background-position:200% center;}
}

/* === NAVIDAD — degradado rojo pasión → vino elegante === */
.hero-title.xmas-red .navidad {
  color: #8E0E1A; /* fallback sólido */
  background: linear-gradient(
    90deg,
    #B4001E 0%,    /* rojo pasión brillante */
    #A10A18 25%,   /* rojo intenso */
    #8B0516 50%,   /* vino medio */
    #650012 75%,   /* vino profundo */
    #3C000A 100%   /* borde oscuro elegante */
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.08);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 0 10px rgba(180, 0, 30, 0.15); /* halo suave */
  position: relative;
}

/* === Árbol SVG dorado elegante === */
.hero-title.xmas-red .tree-icon{
  margin-left:.35rem;
  width:22px;
  height:22px;
  vertical-align:middle;
  transform:translateY(-.08em);
  filter:drop-shadow(0 0 6px rgba(214,183,110,.55));
  animation:treePulse 2.2s ease-in-out infinite alternate;
}
@keyframes treePulse{
  from{opacity:.75;transform:translateY(-.08em) scale(.96);}
  to{opacity:1;transform:translateY(-.08em) scale(1.05);}
}

/* === Subtítulo === */
.hero-sub{
  font-size:clamp(1rem,.6vw + .9rem,1.2rem);
  color:#5b544a;
}

/* === Motion Safe / Mobile === */
@media (prefers-reduced-motion:reduce){
  .hero-title.xmas-red .brilla,
  .hero-title.xmas-red .tree-icon{animation:none!important;}
}
@media (max-width:720px){
  .hero-title.xmas-red{text-align:center;}
  .hero-sub{text-align:center;margin-inline:auto;}
  .hero-title.xmas-red .tree-icon{width:26px;height:26px;margin-left:.4rem;}
}
/* Quita la línea decorativa anterior del título */
.hero-title.xmas-red::after{ content:none !important; }

/* — Espumillón integrado bajo el último renglón — */
.tinsel-silver{
  position: relative;
  z-index: 2;                 /* bajo el texto (que está en z=3) */
  width: min(92%, 720px);
  height: 40px;               /* más fino */
  display: block;
  margin: -.10rem 0 .75rem;   /* ¡acerca al texto! (ligero solape) */
  transform: translateY(-8px);/* aún más cerca de la línea base */
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.04))     /* sombra tenue inferior */
    drop-shadow(0 6px 12px rgba(0,0,0,.06)); /* profundidad global */
  mix-blend-mode: normal;
  pointer-events: none;
}

/* Sombra bajo el último renglón para “tapar” mínimas intersecciones */
.hero-title.xmas-red{
  text-shadow:
    0 .05em .15em rgba(0,0,0,.08), /* tu sombra original/parecida */
    0 .35rem .35rem rgba(0,0,0,.06);/* leve sombra hacia abajo */
  line-height: 1.14;
  overflow: visible;
  padding-bottom: .2rem;
}
.hero-title.xmas-red .word{ display:inline-block; vertical-align: baseline; }

/* Mobile: un poco más arriba y aún más fino */
@media (max-width:720px){
  .tinsel-silver{
    width: 100%;
    height: 34px;
    margin: -.15rem 0 .65rem;
    transform: translateY(-10px);
  }
}
.hero-title.xmas-red{
  line-height: 1.12;       /* un poco más de aire vertical */
  overflow: visible;        /* evita que se recorte el texto */
}

.hero-title.xmas-red .word{
  vertical-align: baseline; /* asegura alineación correcta entre spans */
}
/* Mata cualquier pseudo-elemento antiguo en la palabra NAVIDAD */
.hero-title.xmas-red .navidad::before,
.hero-title.xmas-red .navidad::after{
  content: none !important;
}
/* Alineación fina del SVG de árbol dorado */
.hero-title.xmas-red .tree-icon{
  display: inline-block;
  vertical-align: -0.08em;     /* ajusta milimétrico en Safari/iOS */
  margin-left: .35rem;
}
/* Espumillón más integrado al texto */
.tinsel-silver{
  margin: .25rem 0 .9rem;   /* un pelín menos arriba y abajo */
}
/* --- Z-index y overflows del hero (evita que la imagen pise el H1) --- */
.hero{ position: relative; overflow: visible; }
.hero-text{ position: relative; z-index: 3; overflow: visible; }
.hero-media{ position: relative; z-index: 1; }
.hero .hero-overlay{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* --- Anti-corte de glifos en Safari (descendentes como la “J”) --- */
.hero-title.xmas-red{
  line-height: 1.14;      /* + aire vertical */
  overflow: visible;       /* que nada recorte el texto */
  padding-bottom: .2rem;   /* separa del espumillón */
  -webkit-transform: translateZ(0); /* fuerza nueva capa en iOS */
}
.hero-title.xmas-red .word{
  display: inline-block;
  vertical-align: baseline;
}

/* --- Integra mejor el espumillón (no pisa el último renglón) --- */
.tinsel-silver{
  position: relative;
  z-index: 2;              /* por debajo del texto, por encima del fondo */
  margin: .25rem 0 .9rem;
}

/* --- Elimina cualquier “sparkle”/emoji residual en NAVIDAD --- */
.hero-title.xmas-red .navidad::before,
.hero-title.xmas-red .navidad::after{
  content: none !important;
}
/* ===== BLACK FRIDAY RIBBON ===== */
.bf-ribbon{
  position: relative; /* CAMBIO: relative para que se quede arriba y no te siga */
  z-index: 10;        /* CAMBIO: Bajamos la prioridad para que el menú (z-index 1000) la tape */
  isolation:isolate;
  background:#0B0B0B; 
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(214,183,110,.22);
}

.bf-ribbon__inner{
  max-width:1200px; margin:0 auto; padding:.6rem .95rem;
  display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; align-items:center;
  color:#EDEAE2; text-decoration:none; position:relative; overflow:hidden; cursor:pointer;
}
/* Brillo diagonal sutil */
.bf-ribbon__inner::before{
  content:""; position:absolute; inset:-40% -20%; pointer-events:none;
  background:linear-gradient(110deg,transparent 0 40%,rgba(255,255,255,.09) 50%,transparent 60% 100%);
  transform:translateX(-70%);
  animation:bfSheen 6s linear infinite;
}
@keyframes bfSheen{ to{ transform:translateX(70%);} }

/* Franja superior dorado+negro (contraste) */
.bf-ribbon::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: repeating-linear-gradient(
    90deg,
    #000 0 10%,        /* negro */
    #F4E4B0 10% 28%,   /* dorado claro */
    #000 28% 40%,      /* negro */
    #D6B76E 40% 58%,   /* dorado */
    #000 58% 70%,      /* negro */
    #A37F43 70% 88%,   /* dorado sombra */
    #000 88% 100%      /* negro */
  );
  background-size: 220% 100%;
  animation: bfStripe 14s linear infinite;
}
@keyframes bfStripe{ to{ background-position: -220% 0; } }

.bf-tag{
  font-weight:900; letter-spacing:.12em;
  color:#0B0B0B; padding:.3rem .65rem; border-radius:999px;
  background:linear-gradient(180deg,#F4E4B0,#D6B76E);
  box-shadow:0 6px 16px rgba(214,183,110,.35);
}
.bf-msg{ font-weight:600; color:#D9D4C9; }
.bf-msg strong{ color:#FFE7AE; }
.bf-cta{
  font-weight:800; border-radius:999px; padding:.38rem .9rem;
  color:#0B0B0B; background:linear-gradient(180deg,#F4E4B0,#D6B76E);
  box-shadow:0 8px 20px rgba(214,183,110,.35); text-decoration:none;
}
.bf-ribbon__inner:hover .bf-cta{ transform: translateY(-1px); }

/* Compacto en móvil */
@media (max-width:780px){
  .bf-ribbon__inner{ grid-template-columns:1fr auto; row-gap:.4rem; }
  .bf-tag{ display:none; }
  .bf-msg{ font-size:.95rem; }
}

/* ===== Sección Black Friday ===== */
.bf-section{ padding: 48px 16px; }
.bf-head{ max-width: 960px; margin:0 auto 18px; text-align:center; }
.bf-head h2{
  font-family: "Playfair Display", serif;
  font-weight: 600; letter-spacing:.2px;
  background: linear-gradient(90deg,#F4E4B0,#D6B76E,#A37F43);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.bf-lead{ color:#5b544a; }

.bf-grid{
  max-width:1100px; margin:18px auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.bf-card{
  background: #FFFFFF; border-radius:14px; overflow:hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.bf-card img{ display:block; width:100%; height:auto; }
.bf-info{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
}
.bf-info h3{ margin:0; font-weight:600; }
.pill{
  background:#B3212C; color:#fff; border-radius:999px; padding:.25rem .6rem; font-weight:700;
}

/* Responsive */
@media (max-width:900px){ .bf-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .bf-grid{ grid-template-columns:1fr; } }

/* Suaviza el salto al ancla */
html{ scroll-behavior:smooth; }
/* ====== HERO DE CATEGORÍA (solo ANILLOS – Kodex v4 Optimizado) ====== */
.category-hero.anillos-hero{
  --bg-url: url('https://raw.githubusercontent.com/Juancarlosmora0/martinezjoyeros/main/imagenes/hero-joya.jpg?v=1');
  position: relative;
  margin: 6px 0 8px;
  border-radius: 18px;
  min-height: 240px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  background:
    radial-gradient(1400px 400px at 40% 10%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(20,16,12,.25), rgba(20,16,12,0) 60%, rgba(20,16,12,.06)),
    var(--bg-url) center/cover no-repeat;
}

/* Contenido interior */
.anillos-hero .cat-hero-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 18px 54px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
  position: relative;
  z-index: 2;
}

/* Título principal */
.anillos-hero .cat-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  margin: 0 0 .35rem;
  background: linear-gradient(90deg,#F4E4B0 0%,#D6B76E 55%,#A37F43 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .35px rgba(0,0,0,.15);
}

/* Subtítulo */
.anillos-hero .cat-sub{
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: #f2ede4;
  margin: 0 0 .9rem;
}

/* Chips (materiales) */
.anillos-hero .cat-chips{
  display:flex;
  gap:.5rem;
  padding:0;
  margin:0 0 1rem;
  list-style:none;
}
.anillos-hero .cat-chips li{
  padding:.35rem .7rem;
  border-radius:999px;
  font-weight:600;
  background:rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
}

/* Botón Volver a categorías */
.anillos-hero .cat-cta{
  display:inline-block;
  margin-top:.2rem;
  background:rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding:.45rem .8rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  transition:background .2s ease;
}
.anillos-hero .cat-cta:hover{
  background:rgba(255,255,255,.22);
}

/* Onda separadora (no bloquea clics) */
.anillos-hero .cat-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  width:100%;
  height:80px;
  z-index:1;
  pointer-events:none;
}

/* ====== Responsive (solo hero Anillos) ====== */
@media (max-width: 720px){
  .category-hero.anillos-hero{
    border-radius:14px;
    min-height:200px;
  }
  .anillos-hero .cat-hero-inner{
    padding:38px 14px 46px;
  }
  .anillos-hero .cat-chips{ flex-wrap:wrap; }
}
/* ====== CATÁLOGO (grid y cards) ====== */
.catalogo-section{
  padding: 60px 20px;
  text-align: center;
  background-color: #f8f8f6;
}

.catalogo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 30px auto;
}

/* Card minimalista y compacta */
.producto-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  padding: 10px 10px 16px;
}
.producto-card:hover{ transform: translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,0.1); }

/* Imagen cuadrada y pequeña (como antes) */
.producto-card img{
  width: 82%;              /* más pequeña que el ancho total */
  max-width: 320px;        /* techo para pantallas grandes */
  aspect-ratio: 1 / 1;     /* cuadrada */
  object-fit: contain;     /* sin recortes */
  display: block;
  margin: 22px auto 8px;   /* centrada */
  background:#fff;
}

/* Título centrado */
.producto-card h3{
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  margin: 12px 0 18px;
  color: #4a433a;
  text-align: center;
}

/* Acciones (botones) */
.producto-card .actions{
  display:flex; justify-content:center; gap:10px; padding:8px 0 16px;
}

.btn, .btn-visit{
  display:inline-block;
  font-family:"Montserrat", sans-serif;
  font-weight:600; font-size:.9rem;
  text-decoration:none;
  border-radius:10px;
  padding:.45rem .9rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}

/* Botón dorado: Consultar */
.btn-visit{
  background: linear-gradient(90deg,#F4E4B0,#D6B76E,#A37F43);
  color:#2a1f12; border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.btn-visit:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* Botón contorno: Ver en tienda */
.btn{
  background:#fff; border:1px solid #d8d0c4; color:#4a433a;
}
.btn:hover{ border-color:#c9bda5; transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.08); }
/* ====== HERO BLACK FRIDAY (CSS Corregido) ====== */

/* 1. Contenedor principal del banner */
.bf-hero {
  position: relative; 
  max-width: 1100px;  
  margin: 24px auto 0; 
  border-radius: 18px; 
  overflow: hidden;    
  box-shadow: 0 14px 30px rgba(0,0,0,.08);

  /* MEJORA CLAVE: Define el ratio rectangular (como en Imagen 2) */
  aspect-ratio: 2.4 / 1; 
}

/* 2. La imagen */
.bf-hero img {
  display: block;
  width: 100%;
  height: 100%; /* La imagen debe rellenar el 100% del contenedor */
  
  /* SOLUCIÓN AL BUG: Rellena el espacio sin deformarse */
  object-fit: cover; 
  
  object-position: center; 
}

/* 3. Contenedor del texto superpuesto */
.bf-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Alinea el texto abajo */
  padding: 2rem; 
  background: linear-gradient(180deg, 
    rgba(0,0,0,0) 40%, 
    rgba(0,0,0,0.65) 100%
  );
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* 4. Estilos para el texto */
.bf-hero__text .bf-kicker {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

.bf-hero__text h3 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  margin: 0.25rem 0;
  color: #fff;
}

.bf-hero__text p {
  margin: 0;
  opacity: 0.9;
}

/* ====== Ajuste Responsive (Opcional pero recomendado) ====== */
@media (max-width: 600px) {
  .bf-hero {
     /* Hacemos el banner un poco más alto en móvil */
     aspect-ratio: 1.8 / 1;
  }
  .bf-hero__overlay {
    padding: 1.5rem; 
  }
  .bf-hero__text h3 {
     font-size: 1.4rem;
  }
}

/* ====== Responsive ====== */
@media (max-width: 720px){
  .category-hero{ border-radius:14px; min-height:200px; }
  .cat-hero-inner{ padding:38px 14px 46px; }
  .cat-chips{ flex-wrap:wrap; }
}
@media (max-width:768px){
  .btn, .btn-visit{ font-size:.85rem; padding:.4rem .8rem; }
}
/*

/* ======================================================
   1. HERO "BLACK FRIDAY" - ESTILO PREMIUM (COINCIDENCIA DE MARCA)
   ====================================================== */

.category-hero.bf-category-hero {
  /* 1. Capa de oscuridad para que se lea el texto (linear-gradient negro) 
     2. EL TOQUE MÁGICO: El mismo radial-gradient dorado de tu home (hero-overlay) para dar atmósfera
     3. La imagen de fondo */
  background: 
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%),
    radial-gradient(140% 90% at 100% 100%, rgba(200,164,98,0.3), transparent 55%),
    url('https://raw.githubusercontent.com/Juancarlosmora0/martinezjoyeros/main/imagenes/vidal-vidal-bf.jpg?v=1');
  
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  
  /* Centrado y Espaciado */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  /* Un poco más alto para dar importancia */
  min-height: 380px; 
  padding: 4rem 2rem;
  margin-bottom: 3rem;
  border-radius: 0 0 18px 18px; /* Un toque moderno en las esquinas inferiores si te gusta */
}

/* TÍTULO CON DEGRADADO DORADO BRILLANTE */
.bf-category-hero .cat-title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem); /* Grande como tu h1 base */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  line-height: 1.1;
  
  /* Degradado extraído de tu estilo, pero potenciado para fondo oscuro:
     De un dorado casi blanco (brillo) a tu dorado base (#C8A462) */
  background: linear-gradient(90deg, #F9ECC8 10%, #C8A462 60%, #9E7D3E 100%);
  
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Filtro sutil para que resalte sobre lo oscuro */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

/* SUBTÍTULO */
.bf-category-hero .cat-sub {
  color: #f4f4f4; /* Blanco roto, similar a tu var(--gris) pero para fondo oscuro */
  font-size: 1.2rem;
  font-weight: 400;
  max-width: 700px;
  margin-bottom: 2rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* BOTÓN "VOLVER" - ESTILO IDÉNTICO A TU .btn-hero */
/* Asumimos que el botón tiene una clase o es un <a> dentro del hero */
.bf-category-hero a {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  
  /* Tu color dorado base extraído del análisis */
  background-color: #C8A462; 
  color: #fff;
  
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  
  /* Tu sombra dorada característica */
  box-shadow: 0 6px 20px rgba(200, 164, 98, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover del botón */
.bf-category-hero a:hover {
  transform: translateY(-3px);
  /* Sombra intensificada al pasar el ratón */
  box-shadow: 0 10px 26px rgba(200, 164, 98, 0.55);
  background-color: #d4b06e; /* Un pelín más claro al hover */
}

/* ======================================================
   2. GRILLA Y TARJETAS (DISEÑO LIMPIO)
   ====================================================== */

.product-grid {
  display: grid;
  /* Móvil: 2 columnas | Escritorio: 4 columnas */
  grid-template-columns: repeat(2, 1fr); 
  gap: 20px; 
  padding: 0 5% 40px 5%;
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

.producto-card {
  /* Position relative es vital para la etiqueta del 20% */
  position: relative; 
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #f0f0f0;
}

.producto-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.producto-card img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.producto-info {
  padding: 15px;
  text-align: center;
}

.producto-info h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 5px;
  font-weight: 600;
}

.producto-info .precio {
  color: #B3212C; /* Rojo elegante a juego con etiqueta */
  font-weight: 700;
  font-size: 1rem;
}

/* ======================================================
   3. ETIQUETAS ROJAS -20% (ORIGINALES)
   ====================================================== */

.bf-pill-tag {
  position: absolute;
  top: 15px;  
  right: 15px; 
  z-index: 10; 
  
  background: #B3212C; /* Rojo Black Friday */
  color: #fff; 
  
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px; 
  
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  
  /* Animación de pulso */
  animation: bf-pulse 2s infinite;
}

@keyframes bf-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ======================================================
   CTA FINAL: VISITA A TIENDA (Diseño Martínez Joyeros)
   ====================================================== */

.store-cta {
  /* Fondo oscuro con tu Negro de marca #1F1E1C */
  background: linear-gradient(135deg, #1F1E1C 0%, #2c2a28 100%);
  color: #fff;
  padding: 5rem 1.5rem; 
  text-align: center;
  margin-top: 4rem; 
  position: relative;
  overflow: hidden;
  
  /* Borde superior dorado */
  border-top: 4px solid #C8A462; 
}

/* Brillo dorado ambiental de fondo */
.store-cta::before {
  content: "";
  position: absolute;
  top: -50%; 
  left: 50%;
  transform: translateX(-50%);
  width: 100%; 
  max-width: 800px;
  height: 200%;
  background: radial-gradient(circle, rgba(200,164,98,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.store-cta-content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.store-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
  
  /* Degradado dorado en el texto */
  background: linear-gradient(90deg, #F9ECC8, #C8A462);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C8A462; 
}

.store-cta p {
  font-family: 'Montserrat', sans-serif;
  color: #dcdcdc; 
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.store-cta p strong {
  color: #C8A462; /* Resalta "Alcalá de Henares" en dorado */
  font-weight: 600;
}

/* Botón Mapa Premium */
.btn-mapa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  
  background-color: #C8A462; 
  color: #ffffff;
  
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 1rem 2.2rem;
  border-radius: 999px; 
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  
  box-shadow: 0 6px 20px rgba(200, 164, 98, 0.3);
  transition: all 0.3s ease;
}

.btn-mapa svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.btn-mapa:hover {
  transform: translateY(-3px);
  background-color: #d4b06e; 
  box-shadow: 0 12px 28px rgba(200, 164, 98, 0.5); 
}
/* =========================================
   HEADER FIJO, MENÚS Y EFECTOS PREMIUM
   ========================================= */

/* 1. HEADER FIJO GLOBAL (Index y Productos) */
.main-header {
  background-color: #F6F0E7; /* Color Crema */
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* FIJACIÓN FORZADA */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important; /* Por encima de todo, incluido BF */
  box-shadow: 0 2px 15px rgba(0,0,0,0.04); /* Sombra suave */
  box-sizing: border-box;
  height: 70px; /* Altura controlada */
}

/* Compensar el espacio del header para que no tape el contenido */
body { padding-top: 70px; }

.logo a {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 600; color: #1a1a1a; text-decoration: none;
}

/* 2. BOTÓN HAMBURGUESA (Estilo y Efecto Dorado) */
.nav-toggle {
  display: none; /* Oculto por defecto (se activa según el caso) */
  background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 6px; padding: 10px;
  transition: transform 0.3s ease;
}

.nav-toggle span {
  display: block; width: 24px; height: 2px; 
  background: #333; /* Color normal (negro suave) */
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* --- EFECTO DORADO AL PASAR EL RATÓN --- */
.nav-toggle:hover span {
  background: #C8A462; /* Se tiñe de dorado */
  box-shadow: 0 0 5px rgba(200, 164, 98, 0.4); /* Pequeño brillo */
}
.nav-toggle:hover {
  transform: scale(1.05); /* Crece sutilmente */
}

/* Clase para forzar visualización en PC (Productos) */
.nav-toggle.always-visible { display: flex !important; }


/* =========================================
   CASO A: MENÚ INDEX (Horizontal PC / Vertical Móvil)
   ========================================= */
/* PC */
.nav-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 25px; }
.nav-menu a { font-family: 'Montserrat', sans-serif; text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s; }
.nav-menu a:hover { color: #C8A462; }

/* Móvil */
@media (max-width: 900px) {
  .nav-toggle { display: flex; } /* Mostrar botón en móvil */
  
  /* Menú desplegable simple para index */
  .nav-menu.index-mode {
    display: none; position: absolute; top: 100%; left: 0; width: 100%;
    background: #F6F0E7; flex-direction: column; padding: 20px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05); border-top: 1px solid rgba(0,0,0,0.05);
  }
  .nav-menu.index-mode.active { display: flex; animation: fadeIn 0.3s ease; }
}


/* =========================================
   CASO B: SIDEBAR (Productos) - EFECTO MINIMALISTA
   ========================================= */
.nav-mobile-header, .nav-overlay { display: none; }

/* Estilo del Panel Lateral */
.sidebar-menu {
  position: fixed;
  top: 0; left: 0;
  width: 300px; height: 100vh;
  background-color: #ffffff;
  
  /* Sombra difuminada elegante */
  box-shadow: 10px 0 30px rgba(0,0,0,0.1);
  
  /* --- EFECTO DE APERTURA MINIMALISTA --- */
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Movimiento muy suave "Premium" */
  
  z-index: 99999; /* Superpuesto a todo */
  display: flex; flex-direction: column; padding: 0;
}

.sidebar-menu.active { transform: translateX(0); }

/* Cabecera interna del Sidebar */
.nav-mobile-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 25px 30px; 
  /* Sin borde inferior para más limpieza visual */
}
.nav-mobile-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }
.nav-close-btn {
  background: none; border: none; font-size: 2rem; cursor: pointer; color: #333; transition: color 0.3s;
}
.nav-close-btn:hover { color: #C8A462; }

/* Enlaces del Sidebar */
.sidebar-menu ul { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 0; }
.sidebar-menu a {
  display: block; padding: 18px 30px; 
  font-family: 'Montserrat', sans-serif; text-decoration: none; color: #333; font-size: 1.05rem;
  border-bottom: 1px solid transparent; /* Limpieza */
  transition: all 0.3s;
}
.sidebar-menu a:hover {
  background-color: #fafafa;
  padding-left: 35px; /* Pequeño desplazamiento al hover */
  color: #C8A462;
}

/* Fondo Oscuro con desenfoque (Blur) */
.nav-overlay {
  display: block; position: fixed; inset: 0;
  background: rgba(0,0,0,0.3); /* Más sutil */
  backdrop-filter: blur(4px);   /* EFECTO CRISTAL DESENFOCADO */
  z-index: 99990;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.nav-overlay.active { opacity: 1; pointer-events: all; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
/* ===== EFECTO DE TEXTO NEGRO BRILLANTE ===== */
.bf-title-dark {
  font-family: "Playfair Display", serif;
  font-weight: 700; 
  letter-spacing: 0.5px;
  
  /* Degradado Negro Metálico */
  background: linear-gradient(135deg, #1a1a1a 0%, #555555 50%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Sombra suave para darle volumen 3D */
  filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.15));
}
/* =========================================
   TARJETAS BLACK FRIDAY: ANIMACIÓN + CAMBIO IMAGEN
   ========================================= */

.bf-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.bf-card {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
  position: relative;
}

/* Contenedor de las imágenes para poder apilarlas */
.bf-img-wrap {
  position: relative;
  width: 100%;
  /* Esto asegura que el contenedor tenga la altura de la imagen */
  display: block; 
  overflow: hidden; 
}

/* Estilo común para ambas imágenes */
.bf-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.5s ease, transform 0.6s ease; /* Suavidad */
}

/* IMAGEN TRASERA (La "2"): Absoluta para que se monte encima */
.img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* Invisible al principio */
  z-index: 2;
}

/* --- EFECTOS AL PASAR EL RATÓN (HOVER) --- */

/* 1. La tarjeta sube */
.bf-card-link:hover .bf-card {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* 2. La imagen "2" aparece */
.bf-card-link:hover .img-hover {
  opacity: 1;
}

/* 3. Pequeño zoom adicional para más dinamismo */
.bf-card-link:hover .bf-img-wrap img {
  transform: scale(1.05);
}

/* Etiquetas de precio */
.pill {
  background: #B3212C; color: #fff; font-weight: 700;
  padding: 4px 10px; border-radius: 99px; font-size: 0.9rem;
}
/* =========================================
   CORRECCIÓN SIMETRÍA CATEGORÍAS (5 ELEMENTOS)
   ========================================= */

.categorias-grid {
  display: flex !important;       /* Usamos Flex para controlar la alineación */
  flex-wrap: wrap !important;     /* Permite varias filas */
  justify-content: center !important; /* CLAVE: Centra todo horizontalmente */
  gap: 20px;                      /* Espacio entre tarjetas */
  max-width: 1200px;
  margin: 0 auto;
}

/* Hacemos que las tarjetas tengan un ancho controlado */
.cat-card {
  flex: 0 0 calc(30% - 20px);     /* PC: 3 tarjetas por fila (aprox 30%) */
  min-width: 200px;               /* Ancho mínimo para que no se aplasten */
  margin-bottom: 10px;
  /* Mantenemos tus estilos visuales previos */
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
}

/* AJUSTE PARA TABLET Y MÓVIL */
@media (max-width: 900px) {
  .cat-card {
    flex: 0 0 calc(45% - 15px);   /* Tablet/Móvil: 2 tarjetas por fila */
  }
}

@media (max-width: 480px) {
  .categorias-grid {
    gap: 15px; /* Menos hueco en pantallas pequeñas */
  }
}
/* =========================================
   POPUP DE BIENVENIDA (BLACK FRIDAY)
   ========================================= */

/* El fondo oscuro que cubre toda la pantalla */
.popup-overlay {
  position: fixed;
  inset: 0; /* Ocupa todo */
  background-color: rgba(31, 30, 28, 0.6); /* Oscuro con transparencia */
  backdrop-filter: blur(8px); /* EFECTO CRISTAL DESENFOCADO */
  z-index: 100000; /* Por encima de absolutamente todo */
  
  /* Estado inicial: Oculto */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  
  /* Para centrar la imagen */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Clase para mostrarlo (se añade con JS) */
.popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* El contenedor de la imagen */
.popup-content {
  position: relative;
  width: 100%;
  max-width: 500px; /* Tamaño máximo ideal para esa imagen */
  background: transparent;
  
  /* Animación de entrada (Zoom suave) */
  transform: scale(0.9);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote sutil */
}

.popup-overlay.show .popup-content {
  transform: scale(1);
}

/* La imagen en sí */
.popup-content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px; /* Bordes redondeados elegantes */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Sombra profunda */
  cursor: pointer; /* Manita para indicar clic */
  transition: transform 0.3s ease;
}

/* Efecto al pasar el ratón por la imagen */
.popup-content img:hover {
  transform: scale(1.02);
}

/* Botón de cerrar (X) */
.popup-close {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #fff;
  color: #1F1E1C;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
}

.popup-close:hover {
  background: #C8A462; /* Dorado al pasar el ratón */
  color: #fff;
  transform: rotate(90deg);
}