/* Botón 'Aplicar' del carrito igual a los de .cart-actions */
#apply-discount-btn {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 14px 0 !important;
  font-size: 1.08rem !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  width: 50% !important;
  margin-left: 8px !important;
  margin-bottom: 0 !important;
}
/* Estilo unificado para botones del carrito en todas las páginas */
.cart-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

.cart-actions .btn,
#clear-cart,
#checkout,
#close-cart {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 14px 0 !important;
  font-size: 1.08rem !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.cart-actions .btn {
  width: 50% !important;
  margin-bottom: 0 !important;
}

#close-cart {
  width: 60% !important;
  margin: 0 auto 8px auto !important;
  padding: 8px 0 !important;
  font-size: 0.98rem !important;
  min-height: 36px !important;
}
/* Revert back-btn to original simple style */
.nav-btn.back-btn { color:inherit !important; position:static; }
.nav-btn.back-btn::after { content:none; }
.nav-btn.back-btn:hover { color:inherit !important; }
.nav-btn.back-btn:hover::after { background:none; }
/* Cart overlay and drawer base styles */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  transition: opacity 0.3s;
}
.cart-overlay.active {
  display: block;
  opacity: 1;
}
/* Drawer del carrito con estilos visuales coherentes */
.cart-drawer {
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 420px;
  max-width: 98vw;
  height: 100vh;
  background: #181818 !important;
  color: #fff !important;
  z-index: 10000;
  box-shadow: -2px 0 24px rgba(0,0,0,0.18);
  border-radius: 18px 0 0 18px;
  padding: 24px 18px 18px 18px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  overflow-y: auto;
  transition: transform 0.3s cubic-bezier(.2,.9,.25,1), opacity 0.3s;
  transform: translateX(100%);
  opacity: 0;
}
.cart-drawer.open {
  display: block;
  transform: translateX(0);
  opacity: 1;
}
.cart-drawer h3, .cart-drawer .cart-header {
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: #fff;
}
.cart-drawer .cart-footer {
  margin-top: 0;
  padding-top: 0;
    margin: 0 !important;
  border-top: 1px solid #333;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cart-drawer .cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #333;
}
.cart-drawer .cart-item:last-child {
  border-bottom: none;
}
.cart-drawer .cart-item-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.cart-drawer .cart-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-drawer .cart-item-name {
  font-weight: 600;
  color: #fff;
}
.cart-drawer .cart-item-size {
  font-size: 0.95em;
  color: #aaa;
}
.cart-drawer .cart-item-price {
  font-weight: 700;
  color: #00bfae;
}
.cart-drawer .cart-qty {
  width: 38px;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #222;
  color: #fff;
  text-align: center;
  font-size: 1em;
}
.cart-drawer .cart-empty-msg {
  text-align: center;
  color: #aaa;
  font-style: italic;
  opacity: 0.85;
  padding: 18px 0;
}
@media (max-width: 600px) {
  .cart-drawer {
    width: 96vw !important;
    max-width: 98vw !important;
    left: 2vw !important;
    right: unset !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 14px 6px 10px 6px !important;
    font-size: 0.92rem !important;
  }
  .cart-drawer h3, .cart-drawer .cart-header {
    font-size: 1rem !important;
  }
  .cart-drawer .cart-item-thumb {
    width: 28px !important;
    height: 28px !important;
  }
}
@media (max-width: 600px) {
  .cart-drawer {
    width: 90vw !important;
    max-width: 98vw !important;
    left: 5vw !important;
    right: unset !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 10px 6px !important;
    font-size: 0.82rem !important;
    box-shadow: 0 2px 18px rgba(0,0,0,0.18);
  }
}
/* Carrito flotante centrado y estilizado igual que collection.html */

/* Floating cart: smaller and more compact */
.floating-cart {
  position: fixed !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  animation: fadeInUp 0.5s ease-out !important;
}

.cart-btn-fixed {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #00ffff !important;
  border-radius: 30px !important;
  padding: 7px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.2), 0 2px 8px rgba(0,0,0,0.25) !important;
  transition: background .22s, box-shadow .22s, transform .22s !important;
  min-width: 60px !important;
  justify-content: center !important;
  position: relative;
}

.cart-btn-fixed:hover {
  background: #000000 !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.35), 0 3px 10px rgba(0,0,0,0.35) !important;
}

.cart-btn-fixed .cart-icon {
  font-size: 15px !important;
}

.cart-btn-fixed .cart-count {
  background: #ff0000 !important;
  color: white !important;
  border-radius: 50% !important;
  width: 15px !important;
  height: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: bold !important;
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
}

.cart-btn-fixed .cart-text {
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
}

@media (max-width: 768px) {
  .floating-cart {
    bottom: 7px !important;
  }
  .cart-btn-fixed {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 40px !important;
  }
  .cart-btn-fixed .cart-icon {
    font-size: 12px !important;
  }
  .cart-btn-fixed .cart-count {
    width: 12px !important;
    height: 12px !important;
    font-size: 8px !important;
    top: -3px !important;
    right: -3px !important;
  }
  .cart-btn-fixed .cart-text {
    font-size: 10px !important;
  }
}
/* Responsive cart drawer for mobile */
@media (max-width: 600px) {
  .cart-drawer {
    width: 90vw !important;
    min-width: unset !important;
    max-width: 92vw !important;
    left: 5vw !important;
    right: unset !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 10px 6px !important;
    font-size: 0.82rem !important;
    box-shadow: 0 2px 18px rgba(0,0,0,0.18);
  }
  .cart-header h3 {
    font-size: 0.95rem !important;
  }
  .cart-footer {
    flex-direction: column;
    gap: 6px;
  }

  /* Make product buttons smaller on mobile */
  .btn,
  .primary-btn,
  .secondary-btn,
  .product-buttons .btn,
  .cart-actions .btn,
  .add-to-cart,
  .btn-details {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    min-height: 36px !important;
    border-radius: 7px !important;
  }
  .hero-ctas .primary-btn {
    padding: 8px 16px !important;
    font-size: 0.92rem !important;
    border-radius: 8px !important;
  }
}
@media (max-width: 600px) {
  .cart-drawer {
    width: 90vw !important;
    min-width: unset !important;
    max-width: 92vw !important;
    left: 5vw !important;
    right: unset !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 10px 6px !important;
    font-size: 0.82rem !important;
    box-shadow: 0 2px 18px rgba(0,0,0,0.18);
  }
  .cart-header h3 {
    font-size: 0.95rem !important;
  }
  .cart-footer {
    flex-direction: column;
    gap: 6px;
  }

  /* Make product buttons smaller on mobile */
  .btn,
  .primary-btn,
  .secondary-btn,
  .product-buttons .btn,
  .cart-actions .btn,
  .add-to-cart,
  .btn-details {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    min-height: 36px !important;
    border-radius: 7px !important;
  }
  .hero-ctas .primary-btn {
    padding: 8px 16px !important;
    font-size: 0.92rem !important;
    border-radius: 8px !important;
  }
}
/* Eliminar subrayado de EXPLORAR LA ÉLITE */
.premium-bar-btn, .premium-bar-btn:focus, .premium-bar-btn:active, .premium-bar-btn:visited {
  text-decoration: none !important;
  border-bottom: none !important;
}
.premium-bar-btn::after {
  display: none !important;
  content: none !important;
}
/* Estado deshabilitado para botón Add to Cart en productos con tallas */
.btn.btn-disabled,
.btn[disabled],
.add-to-cart[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5) brightness(0.8);
  pointer-events: auto !important;
  box-shadow: none !important;
  border-color: #555 !important;
}

/* Selectores de talla en tarjetas del listado */
.card-size-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.card-size-selector .size-label {
  font-size: 13px;
  font-weight: 600;
  color: #00ffff;
  margin-right: 4px;
}
.card-size-btn {
  min-width: 38px;
  padding: 6px 10px;
  font-size: 13px;
  background: #000;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  transition: all 200ms ease;
}
.card-size-btn:hover {
  border-color: #00ffff;
  background: #111;
  transform: translateY(-1px);
}
.card-size-btn.active {
  background: #00ffff;
  color: #000;
  border-color: #00ffff;
  font-weight: 700;
}
/* Modal breve para selección de talla - Pop-up centrado */
#size-select-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInBackdrop .3s ease;
}
#size-select-modal.closing { animation: fadeOutBackdrop .3s ease forwards; }
.size-select-modal-content {
  background: #ffffff;
  color: #000;
  padding: 32px 48px;
  border-radius: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  max-width: 420px;
  text-align: center;
  animation: popUpIn .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1.5;
}
#size-select-modal.closing .size-select-modal-content { animation: popUpOut .25s ease forwards; }
@keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOutBackdrop { to { opacity: 0; } }
@keyframes popUpIn { from { opacity: 0; transform: scale(0.8) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes popUpOut { to { opacity: 0; transform: scale(0.85) translateY(10px); } }
#hero-collection-btn { text-decoration:none !important; border-bottom:none !important; position:relative; }
#hero-collection-btn:after { display:none !important; }
/* 1. RESET Y FUENTES GLOBALES */
@font-face { font-family: 'Crown Title'; src: url('./CROWNT.TTF') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family: 'Crown Title Bold'; src: url('./CROWNTB.TTF') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family: 'Crown Title Light'; src: url('./CROWNT.TTF') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
body { font-family:'Montserrat', sans-serif; line-height:1.6; background-color:#ffffff; color:#333; overflow-x:hidden; margin:0; padding:0; }
*, *::before, *::after { box-sizing:border-box; max-width:100%; }
.container { width:90%; max-width:1200px; margin:0 auto; }
.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

 .primary-btn {
    background-color: #1a1a1a; /* Negro Fuerte */
    color: #fff;
    border: 2px solid #1a1a1a;
}

 .primary-btn:hover {
    background-color: #333333;
}

 .secondary-btn {
    background-color: transparent;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
 }

 .secondary-btn:hover {
    background-color: #1a1a1a;
    color: #ffffff;
 }

  /* 2. ESTILOS DE CABECERA  HEADER */ 
 .main-header {
   background-color: rgba(255,255,255,0.92);
   border-bottom: 1px solid #eee;
   padding: 12px 0;
   position: sticky;
   top: 0;
   z-index: 250;
   backdrop-filter: blur(6px);
}

 .main-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: 100%;
}

 .logo {
    /* Moderate responsive size and prevent wrapping - DOUBLED SIZE */
    font-size: clamp(4rem, 10vw, 7rem);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Crown Title as primary font with specific weight for flat tops variant */
    font-family: 'Crown Title', 'UnifrakturMaguntia', 'Old English Text MT', 'Blackletter', 'Fraktur', serif;
    font-weight: 400; /* Use normal variant for flat tops style */
    font-style: normal;
    color: #1a1a1a;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    /* Specify font features for flat tops variant */
    font-feature-settings: "ss01" 1; /* Stylistic set 1 for flat tops */
    font-variant-caps: normal;
 }

/* Header brand: isotipo circular + texto - positioned on the left */
.header-brand { 
  display: flex; 
  align-items: center; 
  gap: 0; /* remove space between brand-link and search */
  flex-shrink: 0;
  margin-right: auto; /* Push other elements to the right */
  position: relative;
  z-index: 10;
}
.brand-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 12px; 
  text-decoration: none; 
  color: inherit; 
  flex-shrink: 0;
  max-width: 100%; /* allow full width */
  margin-right: 0; /* remove extra spacing before search */
}

/* Tagline shown near the logo when product modal opens */
.header-tagline {
   font-size: 0.95rem;
   color: #666666;
   margin-left: 8px;
   display: inline-block;
   vertical-align: middle;
   opacity: 0.98;
   transition: opacity 180ms ease, transform 180ms ease;
}
@media (max-width: 480px) {
   .header-tagline { display: none; }
}

/* Isotipo circular - símbolo de la marca */
.isotipo-wrap {
  width: 180px; /* ampliado */
  height: 180px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 0; /* sin círculo */
  overflow: visible; /* mostrar imagen completa */
  background: transparent !important; /* quitar fondo blanco */
  box-shadow: none !important; /* sin sombra circular */
  position: relative;
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
  margin-right: 12px;
}

/* Logo principal de la marca */
.brand-logo-wrap {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   visibility: visible !important;
   opacity: 1 !important;
}

.brand-logo-img {
   width: 160px !important;
   height: 96px !important;
   object-fit: contain;
   display: block !important;
   visibility: visible !important;
   opacity: 1 !important;
   max-width: none !important;
}

.isotipo-inner { 
   position: absolute; 
   left: 50%; 
   top: 50%; 
   transform: translate(-50%, -50%); 
   width: 90%; 
   height: 90%; 
   display: block !important; 
   visibility: visible !important;
   opacity: 1 !important;
}

.isotipo-img { 
   width: 100% !important; 
   height: 100% !important; 
   object-fit: contain; 
   display: block !important; 
   visibility: visible !important;
   opacity: 1 !important;
   max-width: none !important;
}

/* PDF fallback displayed inside the circle when PNG is missing */
.isotipo-pdf {
   width: 100%;
   height: 100%;
   border: none;
   display: block;
}

@media (max-width: 900px) {
   /* Tablet / small desktop (aumentado 50%) */
   .isotipo-wrap { 
     width: 150px !important; 
     height: 150px !important; 
     display: inline-flex !important;
     visibility: visible !important;
     margin-right: 8px;
     border-radius: 0 !important;
     background: transparent !important;
     box-shadow: none !important;
   }
   .brand-logo-wrap {
       display: inline-flex !important;
   }
   .brand-logo-img {
       width: 140px !important;
       height: 84px !important;
   }
   .logo { font-size: clamp(3.2rem, 8vw, 5.6rem); }
}

@media (max-width: 480px) {
  /* Mobile (aumentado 50%) */
  .isotipo-wrap { width: 120px; height: 120px; margin-right: 6px; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
   .brand-logo-wrap {
       display: inline-flex !important;
   }
   .brand-logo-img {
       width: 120px !important;
       height: 72px !important;
   }
   .logo { 
       display: none !important; 
       font-size: clamp(2.4rem, 12vw, 3.6rem) !important;
   }
}

/* Responsive header: stack nav on small screens */
@media (max-width: 720px) {
   .main-header .container { flex-direction: column; gap: 12px; }
   .main-nav ul { flex-direction: column, gap: 8px; align-items: center; }
}

/* Compact header on very small screens to avoid taking too much vertical space */
@media (max-width: 480px) {
   .main-header { padding: 8px 0; }
   .main-header .container { display: flex; align-items: center; justify-content: flex-start; gap: 8px; position: relative; }
   .header-brand { gap: 8px; margin-right: auto; max-width: calc(100% - 70px); }
   .isotipo-wrap { width: 56px; height: 56px; }
   .brand-logo-wrap { width: 100px; height: 60px; }
   .logo { 
       display: none !important; 
       font-size: clamp(1.2rem, 6vw, 1.8rem) !important;
   }
   .cart-btn { right: 12px; top: 12px; font-size: 1.3rem; }
   /* hide full nav to save vertical space; provide a compact toggle (hamburger) */
   .main-nav { display: none !important; }
   /* make search minimal: icon-only by default; expand on focus */
   .header-search { order: 2; width: auto; }
   .header-search input[type="search"] { min-width: 0; width: 0; padding-left: 36px; border-radius: 8px; opacity: 0; pointer-events: none; transition: width 240ms ease, opacity 200ms ease; }
   .header-search.open input[type="search"] { width: 160px; opacity: 1; pointer-events: auto; }
   .search-wrap { position: relative; }
   .search-btn { left: 6px; }
   /* cart button: reduce vertical footprint */
   .cart-btn { position: relative; right: auto; top: auto; padding: 6px; }
   .cart-count { margin-left: 6px; }
}

 .main-nav ul {
    list-style: none;
    display: flex;
}

/* Header search - ahora aún más cerca del logo */
.header-search { margin-left: 0; display: flex; align-items: center; }
.search-wrap { position: relative; display: inline-flex; align-items: center; }
/* Collapsed search (desktop + mobile unified) */
.header-search input[type="search"] { padding: 8px 12px 8px 36px; border-radius: 8px; border: 1px solid #e6e6e6; width:0; min-width:0; opacity:0; pointer-events:none; transition: width 240ms ease, opacity 200ms ease; font-size:0.95rem; }
.header-search.open input[type="search"] { width:220px; opacity:1; pointer-events:auto; }
@media (max-width:900px){ .header-search.open input[type="search"] { width:100%; } }
.header-search input[type="search"]:focus { outline: 3px solid #ffd6a5; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.search-btn { cursor:pointer; }
.search-btn { position: absolute; left: 4px; background: transparent; border: none; padding: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.search-btn svg { display: block; width: 40px; height: 40px; }

/* Magnifier animation - subtle bounce + rotation on click, and glow on hover */
.search-btn { transition: transform 220ms cubic-bezier(.2,.9,.25,1), box-shadow 220ms ease; }
.search-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.search-btn:active { transform: translateY(0) scale(0.98); }
.search-btn .magnify-anim { transform-origin: 50% 50%; transition: transform 360ms cubic-bezier(.2,.9,.25,1); }
.search-btn.animating { animation: magnify-click 520ms cubic-bezier(.2,.9,.25,1); }
@keyframes magnify-click {
   0% { transform: translateY(0) rotate(0deg); }
   30% { transform: translateY(-6px) rotate(-8deg) scale(1.06); }
   60% { transform: translateY(2px) rotate(6deg) scale(0.98); }
   100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* small glowing pulse for focus-visible (keyboard users) */
.search-btn:focus-visible { outline: 3px solid #ffd6a5; outline-offset: 3px; }

@media (max-width: 900px) {
   .header-search { order: 3; margin-top: 8px; width: 100%; }
   .header-search input[type="search"] { width: 100%; min-width: auto; }
}

 .main-nav ul li a {
    text-decoration: none;
    color: #1a1a1a;
    padding: 0 15px;
    font-weight: 700;
    transition: color 0.3s ease;
}

 .main-nav ul li a:hover {
    color: #999999;
 }

/* Enhanced header nav animations: subtle lift, underline slide and entrance stagger */
.main-nav ul li a {
   position: relative;
   display: inline-block;
   padding: 8px 14px;
   transition: color 220ms ease, transform 220ms cubic-bezier(.2,.9,.25,1);
   will-change: transform;
}
.main-nav ul li a::after {
   content: '';
   position: absolute;
   left: 50%;
   bottom: -6px;
   transform: translateX(-50%) scaleX(0);
   transform-origin: center;
   width: 56%;
   height: 3px;
   background: linear-gradient(90deg,#ff7a00,#ff4500);
   border-radius: 3px;
   transition: transform 260ms cubic-bezier(.2,.9,.25,1), opacity 200ms ease;
   opacity: 0;
}
.main-nav ul li a:hover, .main-nav ul li a:focus {
   color: #ff4500;
   transform: translateY(-4px) scale(1.02);
}
.main-nav ul li a:hover::after, .main-nav ul li a:focus::after {
   transform: translateX(-50%) scaleX(1);
   opacity: 1;
}
.main-nav ul li a:focus-visible { outline: 3px solid #ffd6a5; outline-offset: 4px; }

/* Entrance stagger for nav items to give a polished feel on load */
@keyframes nav-item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.main-nav ul li a { opacity: 0; animation: nav-item-in 420ms cubic-bezier(.2,.9,.25,1) both; }
.main-nav ul li:nth-child(1) a { animation-delay: 40ms; }
.main-nav ul li:nth-child(2) a { animation-delay: 120ms; }
.main-nav ul li:nth-child(3) a { animation-delay: 200ms; }
.main-nav ul li:nth-child(4) a { animation-delay: 280ms; }

  /* 3. SECCION HERO  Primer Impacto */
    .hero-section {
      /* Revertido: uso de cover para ocupar todo y centrado */
      background: url('../Template/fondo.png?v=20251123') no-repeat center center/cover;
    height: 70vh; /* Buena altura para ser visible */ 
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

 .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45); /* Capa oscura para mejorar contraste */
        z-index: 1;
}

 .hero-content { position: relative; z-index: 2; max-width: 1100px; padding: 20px; }

 .hero-content h2 {
   font-size: clamp(1.6rem, 4vw, 3rem);
   margin-bottom: 10px;
   color: #ffffff;
}

 .hero-content p {
   font-size: clamp(1rem, 2.2vw, 1.2rem);
   margin-bottom: 30px;
}

/* Announcement bar */
.site-announcement {
  background: #222222; /* Fondo gris oscuro solicitado */
  color: #ffffff;
  padding: 8px 12px;
  text-align: center;
  font-weight: 700;
  letter-spacing: .5px;
  pointer-events: none; /* No bloquea clics/interacciones */
}

.hero-ctas { display:flex; gap:12px; justify-content:center; align-items:center; }
.hero-ctas .primary-btn { padding: 12px 28px; font-size: 1.05rem; border-radius: 10px; }
.hero-ctas .secondary-btn { padding: 10px 20px; }

/* make hero CTA stand out on mobile */
@media (max-width:600px){ .hero-ctas { flex-direction: column; gap: 10px; } }

.hero-content { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; }
.hero-content.visible { opacity: 1; transform: translateY(0); }

/* CTA pulse */
.btn.primary-btn { position: relative; }
#hero-collection-btn::after { content:none !important; }
#hero-collection-btn { font-weight:900 !important; border:none !important; box-shadow:none !important; }
#hero-collection-btn:hover { box-shadow:none !important; transform:translateY(-2px); }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Product cards fade-up */
.product-card { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
.product-card.visible { opacity: 1; transform: translateY(0); }

 /* 4. SECCION DE PRODUCTOS */
    .product-section {
    padding: 60px 0;
    text-align: center; /* ESTO CENTRA LOS TITULOS Y TEXTO DE LA SECCION */
}
 .product-section h2 {
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.product-grid {
   display: grid;
   /* use a flexible minimum column width so grid can adapt on small screens */
   grid-template-columns: repeat(auto-fit, minmax(var(--product-grid-min, 160px), 1fr));
  gap: 12px;
}

/* Responsive product media height tuning */
@media (max-width: 1000px) {
  :root { --product-media-height: 168px; --product-grid-min: 140px; }
}
@media (max-width: 720px) {
  :root { --product-media-height: 148px; --product-grid-min: 140px; }
  .product-grid { gap: 6px; }
}
@media (max-width: 420px) {
  :root { --product-media-height: 128px; --product-grid-min: 120px; }
  .product-grid { gap: 6px; }
}

.product-filters { 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap; 
    margin: 20px 0 30px; 
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    border: 1px solid #dee2e6;
}

.filter-btn { 
    background: #2d2d2d; 
    border: 2px solid #2d2d2d; 
    padding: 12px 24px; 
    border-radius: 25px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 0.95rem;
    transition: all 0.3s ease;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    min-width: 80px;
    text-align: center;
}

.filter-btn:hover { 
    background: #444; 
    color: white; 
    border-color: #444; 
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.filter-btn.active { 
    background: #007bff; 
    color: white; 
    border-color: #007bff; 
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,123,255,0.4);
}

/* (removed save/bookmark styles) */

/* Simplified 'Ver detalles' button (black background, white text) */
.btn-details {
  position: relative;
  background:#000000 !important;
  color:#ffffff !important;
  border:2px solid #000000 !important;
  border-radius:0 !important;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:none !important;
  transition:none !important;
}
.btn-details:hover, .btn-details:focus {
  background:#222222 !important;
  color:#ffffff !important;
  border-color:#222222 !important;
}

/* Product card filter animations */
.product-card { transition: opacity 320ms cubic-bezier(.2,.9,.25,1), transform 320ms cubic-bezier(.2,.9,.25,1); }
.product-card.filtered-out { opacity: 0; transform: translateY(12px) scale(.985); pointer-events: none; }

/* When re-entering, remove filtered-out to animate in */
.product-card.filter-enter { opacity: 0; transform: translateY(12px) scale(.985); }
.product-card.filter-enter.visible, .product-card.visible { opacity: 1; transform: translateY(0) scale(1); }

/* filter button activation bump */
.filter-btn.active { animation: filter-activate 360ms cubic-bezier(.2,.9,.25,1); }
@keyframes filter-activate { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

 .product-card {
   border: 1px solid #222; /* dark border */
   padding: 20px;
   background-color: #000; /* fondo negro unificado */
   transition: none; /* sin animaciones según pedidos recientes */
   box-shadow: none;
}

   .product-card:hover {
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      transform: translateY(-6px);
}
    
   .product-card img {
         width: 100%;
         display: block;
         margin-bottom: 15px;
         object-fit: cover; /* crop to fill when outside .product-media */
         object-position: center center;
         border-radius: 8px;
      }
      /* Use a CSS variable so we can tune media box height per breakpoint */
      :root { --product-media-height: 220px; }
      /* video inside product card - match image sizing and behaviour using the variable */
      .product-card .product-video { width: 100%; height: var(--product-media-height); display: block; margin-bottom: 15px; object-fit: cover; border-radius: 0; background: #000; }
      .product-card .product-video img { width: 100%; height: var(--product-media-height); object-fit: cover; border-radius: 8px; display:block; }

      /* product badges and overlay */
      /* fix: force a consistent media box so videos don't expand cards */
      /* Keep media box consistent but never larger than a fraction of the viewport on small screens */
      .product-media { position: relative; overflow: hidden; /* height tuned by variable, but capped to viewport */ height: min(var(--product-media-height), 36vh); aspect-ratio: 3 / 4; }
      /* make the main media (img or video) fill the box and crop via object-fit */
      .product-media > img, .product-media > .product-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
  .product-media .badge { position: absolute; top: 10px; left: 10px; background: #ff4500; color: #fff; padding: 6px 8px; border-radius: 0; font-weight:700; font-size:0.85rem; }
   .product-media .badge.sale { background: #ff7a00; }
   .product-media .badge.new { background: #1a1a1a; }
   .product-media .badge.limited { background: #3b3b3b; }
  .product-media .stock { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.8); color: #00ffff; padding:4px 8px; border-radius: 0; font-weight:700; font-size:0.85rem; border:1px solid #222; }
   .product-media .stock.low-stock { background: #ffe9e6; color: #c0392b; }
   .product-media img { transition: transform 420ms cubic-bezier(.2,.9,.25,1); }
   .product-media:hover img { transform: scale(1.06); }

   /* small thumbnail inside product card (optional secondary image) */
  .product-media .thumb-img { position: absolute; left: 10px; bottom: 10px; width: 56px; height: 56px; border-radius: 0; border: 2px solid #222; box-shadow: none; cursor: pointer; object-fit: cover; transition: none; }
   .product-media .thumb-img:hover, .product-media .thumb-img:focus { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.18); }
   .product-media { position: relative; }
   /* visual feedback when thumb was just swapped */
   .product-media .thumb-swapped { transform: scale(0.98) translateY(0); box-shadow: 0 6px 14px rgba(0,0,0,0.12); opacity: 0.96; }

   .rating { margin: 6px 0; color: #333; display:flex; align-items:center; gap:8px; justify-content:center; }
   .stars { color: #ffb400; font-weight:700; }
   .rating-count { color: #777; font-size:0.9rem; }
   .price .was { text-decoration: line-through; color: #999; margin-left:8px; font-weight:600; }

   /* Trust badges in footer */
   .trust-badges { display:flex; gap:12px; align-items:center; }
   .trust-badges .badge-item { background:#fff; color:#1a1a1a; padding:8px 10px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); font-weight:700; }

    
   /* default image sizing for images outside the media box (product pages, modals) */
   .product-card img { width: 100%; display: block; margin-bottom: 15px; border-radius: 8px; }


     /* 5. SECCION SOBRE LA MARCA */
    .about-section {
      background-color: #000000; /* Fondo negro solicitado */
        padding: 80px 0;
        text-align: center;
}

     .about-section p {
        max-width: 800px;
        margin: 20px auto 0;
        font-size: 1.1rem;
      color: #ffffff; /* Texto en blanco */
}
    .about-section h3 { color:#ffffff; }

     /* 6. PIE DE PAGINA  FOOTER */
     .main-footer {
        background-color: #1a1a1a;
        color: #ffffff;
        padding: 30px 0;
}

     .main-footer .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
}

     /* Copyright section - always horizontal and centered */
     .main-footer .copyright-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
     }

     .main-footer .copyright-section p {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
     }

     .main-footer a {
        color: #ffffff;
        text-decoration: none;
        transition: color 0.3s ease;
}

         .main-footer a:hover {
            color: #999999;
}

/* social links small spacing */
.social-links a { margin: 0 6px; }

/* Social links animations: entrance stagger + hover microinteraction */
.main-footer .social-links {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   justify-content: center;
   max-width: 300px;
   margin: 0 auto;
}

.main-footer .social-links a {
   color: #ffffff;
   text-decoration: none;
   font-weight: 600;
   padding: 10px 15px;
   border-radius: 8px;
   background-color: rgba(255, 255, 255, 0.1);
   text-align: center;
   transition: transform 180ms ease, color 180ms ease, background-color 180ms ease;
   font-size: 14px;
}

.main-footer .social-links a:focus, .main-footer .social-links a:hover {
   transform: translateY(-3px);
   color: #ff7a00; /* naranja */
   box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Small spacing and vertical align for inline icons */
.main-footer .social-links a span { vertical-align: middle; }

/* Divider between items */
.main-footer .social-links a:not(:last-child) {
   padding-right: 16px;
   margin-right: 12px;
   position: relative;
}
.main-footer .social-links a:not(:last-child)::after {
   content: "";
   position: absolute;
   right: 4px;
   top: 50%;
   transform: translateY(-50%);
   height: 18px;
   width: 1px;
   background: rgba(255,255,255,0.08);
}

/* Ensure the inner span inherits color on hover for stronger visual change */
.main-footer .social-links a span { color: inherit; }
.main-footer .social-links a:hover span, .main-footer .social-links a:focus span { color: #ff7a00; }

/* entrance animation retained from previous SVG variant */
.social-entrance {
   animation: social-entrance 600ms var(--ease) both;
}

@keyframes social-entrance {
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
}


/* Accessible focus states */
a:focus, .btn:focus { outline: 3px solid #ffd6a5; outline-offset: 2px; }

@media (max-width: 600px) {
  /* Reduce hero to avoid pushing content down too far */
  .hero-section { height: 45vh; }

  /* Make search input occupy full width on mobile */
  .header-search { width: 100%; }
  .header-search input[type="search"] { min-width: 0; width: 100%; }

  /* Place thumbnail inline below the main image to avoid overlap and increase touch target */
  .product-media .thumb-img { position: static; display: inline-block; margin-top: 8px; width: 56px; height: 56px; border: 2px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
  .product-media { display: block; }
}

/* Crossfade helper: fade out/in during image swap */
.pd-media img, .product-media img, #pd-image { transition: opacity 260ms ease; }
.img-fade-out { opacity: 0; }
.img-fade-in { opacity: 1; }

/* 7. SECCION DE CONTACTO */
 .contact {
  padding: 60px 0;
  background:#000;
  color:#fff;
}

 .contact form {
    display: flex;
    flex-direction: column;
}

 .contact input, .contact textarea {
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid #444;
  border-radius: 4px;
  background:#111;
  color:#fff;
}

 .contact input::placeholder,
 .contact textarea::placeholder { color:#aaaaaa; }
 .contact input:focus, .contact textarea:focus { outline:2px solid #555; }

.header-actions .back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #000 !important;
    border: 2.5px solid #00eaff !important;
    border-radius: 12px;
    box-shadow: 0 0 12px #00eaff55;
    font-size: 2rem;
    color: #fff !important;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .header-actions .back-btn:hover {
    background: #222 !important;
    color: #66ffff !important;
    box-shadow: 0 0 16px #00eaff99;
  }

  /* Eliminar estilos viejos de back-collection-btn */
  .header-actions .back-collection-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
  }