/* ===== Variables y base (unificadas) ===== */
:root{
  /* Paleta y branding existente */
  --primary-color:#000;
  --secondary-color:#111827;
  --text-color:#fff;
  --highlight-color:#4a90e2;
  --lecilogo-color:#3DF807;
  --border-color:#ddd;
  --hover-shadow:rgba(0,0,0,0.2);
  --card-bg-color:#fff;          /* usado como fallback claro */
  --grid-gap:20px;

  /* Facelift 2025 */
  --bg-0:#0f141a;                /* fondo base oscuro */
  --bg-1:#111827;                /* paneles oscuros */
  --card:#0b1220;                /* card dark sutil */
  --card-border:rgba(255,255,255,0.08);
  --muted:#94a3b8;               /* texto secundario */
  --ring:rgba(61,248,7,0.45);
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

html{scroll-behavior:smooth}
body{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  padding:0;
  background:var(--bg-0);
  color:var(--text-color);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hidden{display:none}

/* ===== Header / Menú (fusionado) ===== */
header{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:14px 22px;
  position:relative; z-index:999;
  background:linear-gradient(180deg,rgba(17,24,39,.85) 0%, rgba(17,24,39,.6) 100%);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-top:0 !important;
}
header .logo img{height:40px}
header .logo{text-align:center;flex:1 1 100%;margin-bottom:10px}
header .search-container{flex:1;display:flex;justify-content:flex-end}

/* Buscador moderno (manteniendo radius) */
header input[type="text"]{
  padding:10px;width:300px;border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:16px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
header input[type="text"]::placeholder{color:#9aa4b2}
header input[type="text"]:focus{
  outline:none;
  border-color:var(--lecilogo-color);
  background:rgba(255,255,255,0.10);
  box-shadow:0 0 0 4px var(--ring);
}

nav{display:flex;gap:15px}
nav a{
  color:var(--text-color);text-decoration:none;font-size:18px;font-weight:600;
  padding:10px 12px;position:relative;border-radius:999px;
  transition:background-color .2s, color .2s;
}
nav a::after{
  content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;
  background:var(--lecilogo-color);transition:width .3s
}
nav a:hover{
  color:var(--lecilogo-color);
  background:rgba(255,255,255,0.06);
}
nav a:hover::after{width:100%}

/* ===== Social (desktop) – ghost buttons ===== */
.social-icons{
  position:absolute;top:10px;right:10px;display:flex;gap:10px;z-index:1000
}
.social-icons a{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  font-size:18px;text-decoration:none;transition:transform .3s, box-shadow .3s, border-color .2s, background .2s, color .2s;
  background:transparent;border:1px solid rgba(255,255,255,0.15);color:#fff !important;box-shadow:none;
}
.social-icons a:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.35);
}

/* ===== Dropdown ===== */
.dropdown{position:relative;display:inline-block;vertical-align:middle}
.dropdown > a{padding:5px 10px;border-radius:5px;display:inline-block}
.dropdown-content{
  display:none;position:absolute;background:#111827;box-shadow:0 8px 16px var(--hover-shadow);
  z-index:10;border-radius:8px;min-width:220px;overflow:hidden;padding:10px 0
}
.dropdown-content a{
  color:#fff;padding:10px 20px;text-decoration:none;display:block;font-size:16px;transition:all .3s;white-space:nowrap
}
.dropdown-content a:hover{background:transparent;padding-left:30px}
.dropdown:hover .dropdown-content{display:block}

/* ===== Menú móvil (nítido) ===== */
.menu-icon{display:none;cursor:pointer;position:absolute;top:20px;right:25px}
.menu-icon i{font-size:24px;color:var(--text-color)}
.discount-icon{display:none;cursor:pointer;position:absolute;top:20px;left:25px}
.discount-icon i{font-size:24px;color:#FFD700}

.slide-menu{
  position:fixed;top:0;right:-100%;width:80%;height:100%;
  background:rgba(10,14,20,0.9);backdrop-filter:blur(10px);
  padding:60px 20px 20px;box-shadow:-2px 0 5px rgba(0,0,0,.2);
  transition:right .3s;display:flex;flex-direction:column;z-index:1000;
  border-left:1px solid rgba(255,255,255,0.06);
}
.slide-menu > a, .slide-menu > .dropdown > a{
  display:block;padding:20px;color:#fff;text-decoration:none;font-size:16px;font-weight:600;margin-bottom:15px;
  border-radius:5px;background:rgba(255,255,255,0.06);text-align:center;transition:background-color .3s, transform .3s
}
.slide-menu > a:hover, .slide-menu > .dropdown > a:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px)}
.slide-menu .dropdown-content{
  display:none;background:rgba(0,0,0,.9);padding-left:10px;margin-top:5px;border-radius:5px;position:relative
}
.slide-menu .dropdown.open .dropdown-content{display:block}
.slide-menu i{margin-right:10px;font-size:18px}
.slide-menu .close-btn{position:absolute;top:15px;right:15px;font-size:35px;color:var(--text-color);cursor:pointer;transition:transform .3s}
.slide-menu .close-btn:hover{transform:scale(1.2)}

.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999;display:none}

.slide-menu .sm-social-icons{
  display:flex;justify-content:center;gap:15px;margin-top:auto;padding:20px 0;
}
.slide-menu .sm-social-icons a{
  width:45px;height:45px;font-size:26px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:transform .3s;
}
.slide-menu .sm-social-icons a > i{font-size:24px}
.sm-social-icons a.youtube{color:#FF0000}
.sm-social-icons a.telegram{color:#0088cc}
.sm-social-icons a.patreon{color:#F96854}
.sm-social-icons a.amazon{color:#FF9900}
.sm-social-icons a.discord{color:#5865F2}
.sm-social-icons a.twitter{color:#1DA1F2}
.sm-social-icons a:hover{background:transparent;transform:scale(1.1);box-shadow:none}

.social-icons a.youtube{color:#FF0000 !important}
.social-icons a.telegram{color:#0088cc !important}
.social-icons a.patreon{color:#F96854 !important}
.social-icons a.amazon{color:#FF9900 !important}
.social-icons a.discord{color:#5865F2 !important}
.social-icons a.twitter{color:#1DA1F2 !important}

/* ===== Grid / Cards (modernas, unificado) ===== */
.grid-container{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:24px; padding:24px; margin-bottom:100px;
}

.product-card{
  position:relative;overflow:hidden;border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%); /* oscuro */
  border:1px solid var(--card-border);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  transition:transform .3s, box-shadow .3s;
  transform:translateZ(0);
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-card a{text-decoration:none}

/* Imagen: de padding-top hack -> aspect-ratio */
.product-card picture{
  display:block;position:relative;width:100%;
  padding-top:0;aspect-ratio:16/9;
}
.product-card img{
  position:static;width:100%;height:100%;object-fit:cover;border-radius:10px 10px 0 0;
}

/* Título */
.product-card h3{
  margin:12px 12px 14px;font-size:15px;text-align:center;
  color:#e5e7eb;font-weight:600;
}

/* Badges y caja de “copiar” */

.discount-info{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);
  color:#fff;border-radius:5px;padding:0 10px;font-size:14px;font-weight:bold;display:flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,0.08);
}
.discount-info .copy-btn{
  padding:5px 10px;font-size:13px;background:#ffd400;color:#000;border-radius:3px;border:1px solid rgba(0,0,0,0.2);
  cursor:pointer;font-weight:bold;transition:background-color .3s
}
.discount-info .copy-btn:hover{background:#e6c200}

/* ===== Modales (pulidos, dark) ===== */
.modal{
  display:none;position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.7);backdrop-filter:blur(5px);align-items:center;justify-content:center
}
.modal-content{
  background:linear-gradient(180deg,#0f172a,#0b1220);
  color:#CCC;border:1px solid rgba(255,255,255,0.06);
  padding:20px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);
  width:90%;max-width:400px;text-align:center;position:relative
}
.close-modal{
  position:absolute;top:10px;right:10px;font-size:24px;color:#94a3b8;cursor:pointer;transition:transform .3s, color .2s
}
.close-modal:hover{color:#fff;transform:scale(1.2)}
.modal-content h2{margin:0 0 10px;font-size:24px;color:#e5e7eb}
.modal-content p{font-size:16px;margin-bottom:15px;color:#cbd5e1}
.modal-content textarea{
  width:calc(100% - 20px);height:100px;padding:10px;margin-bottom:15px;border:1px solid #334155;border-radius:5px;
  box-sizing:border-box;resize:none;background:#0b1220;color:#e5e7eb
}
.modal-content button{margin:5px;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px}
#sendFeedback{background:#4CAF50;color:#fff}
#sendFeedback:hover{background:#45a049}
#skipFeedback{background:#f44336;color:#fff}
#skipFeedback:hover{background:#e53935}
#closeForeverBtn{
  margin-top:10px;padding:10px 20px;font-size:14px;color:#fff;background:#f44336;border:none;border-radius:5px;
  cursor:pointer;transition:background-color .3s, transform .3s
}
#closeForeverBtn:hover{background:#d32f2f;transform:scale(1.1)}
.telegram-link,.whatsapp-link{
  display:inline-block;margin:10px 5px;padding:10px 20px;font-size:18px;color:#fff;border-radius:5px;text-decoration:none;
  transition:background-color .3s, transform .3s
}
.telegram-link{background:#0088cc}
.telegram-link:hover{background:#005f99;transform:scale(1.1)}
.whatsapp-link{background:#25D366}
.whatsapp-link:hover{background:#1c9c56;transform:scale(1.1)}

/* ===== Botón privacidad ===== */
.privacy-float-btn{
  position:fixed;bottom:80px;left:15px;width:45px;height:45px;background:#0056A7;color:var(--text-color);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:all .3s;z-index:1000
}
.privacy-float-btn:hover{background:var(--lecilogo-color);transform:scale(1.1)}
.privacy-float-btn::after{
  content:attr(title);position:absolute;top:20%;left:calc(100% + 80px);transform:translateX(-50%);
  background:var(--primary-color);color:var(--text-color);padding:5px 10px;border-radius:5px;font-size:12px;white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none
}
.privacy-float-btn:hover::after{opacity:1}

/* ===== Chips / Filtros (nuevo) ===== */
.filters{
  display:flex;flex-wrap:wrap;gap:10px;padding:0 24px;margin-top:8px;
}
.chip{
  padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);
  color:#cbd5e1;cursor:pointer;user-select:none;transition:background .2s, border-color .2s, transform .2s;
}
.chip:hover{background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.chip.active{border-color:var(--lecilogo-color);color:#fff}

/* ===== Skeletons (nuevo) ===== */
.skeleton{
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size:200% 100%;animation:shimmer 1.2s infinite linear;border-radius:10px;min-height:180px;
  border:1px solid rgba(255,255,255,0.06);
}
@keyframes shimmer{
  0%{background-position:200% 0} 100%{background-position:-200% 0}
}

/* ===== Accesibilidad ===== */
:focus-visible{outline:3px solid var(--lecilogo-color);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ===== Responsive ===== */
@media (max-width:768px){
  .social-icons{display:none}
  nav{display:none}
  .menu-icon{display:block}
  .discount-icon{display:block}
  .desktop-menu{display:none}
  .slide-menu{display:block}
  .menu-overlay{display:none}
  .privacy-float-btn::after{display:none}
  header input[type="text"]{width:200px}
  .grid-container{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}
@media (min-width:769px){
  .slide-menu{display:none}
}
@media (max-width:480px){
  header{flex-direction:column;align-items:center;padding:15px 10px}
  header .logo{margin:auto;text-align:center}
  header .logo img{width:75%;height:auto;margin-bottom:10px}
  header input[type="text"]{width:90%;max-width:100%;padding:15px;font-size:18px;border-radius:25px}
  .grid-container{grid-template-columns:repeat(2,1fr)}
  .product-card h3{font-size:14px}
  .discount-info{top:1px;right:0;font-size:12px}
  .discount-info .copy-btn{padding:2px 5px;font-size:10px}
}
/* NUEVA ACTUALIZACION */
/* ======= Cards modernas ======= */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  padding: 20px;
}

/* tarjeta */
.product-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0c0f19; /* fondo oscuro para que el blanco de la imagen contraste */
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid rgba(255,255,255,.06);
  isolation: isolate;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}

/* borde glow sutil (opcional) */
.product-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 60% at 30% 0%, rgba(61,248,7,.2), transparent 70%);
  opacity: .25;
}

/* contenedor imagen con aspect-ratio moderno */
.product-card picture,
.product-card .media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111827;
}

.product-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

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

/* título sobre degradado inferior */
.product-card h3 {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.85) 100%);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  transform: translateZ(0);
}

/* ======= Badge de descuento elegante ======= */


/* mini botón de copiar dentro del badge */
.product-card .copy-mini {
  appearance: none;
  border: none;
  outline: none;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.product-card .copy-mini:hover {
  background: rgba(255,255,255,.25);
  transform: translateY(-1px);
}

/* info de descuento (mensaje) reposicionado y más discreto */
.product-card .discount-info {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(6px);
}

/* accesibilidad: foco visible */
.product-card a:focus-visible,
.product-card .copy-mini:focus-visible {
  outline: 2px solid #3DF807;
  outline-offset: 2px;
  border-radius: 12px;
}

/* ======= estado de carga (skeletons) ======= */
.skel-card {
  border-radius: 16px;
  background: #0c0f19;
  overflow: hidden;
  position: relative;
  height: 0;
  padding-top: calc(9 / 16 * 100%); /* 16:9 */
}

.skel-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 45%, rgba(255,255,255,.06) 100%);
  animation: skel 1.2s linear infinite;
}

@keyframes skel {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* animación de aparición */
.product-card {
  opacity: 0;
  transform: translateY(6px);
}
.product-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease, box-shadow .25s ease;
}


/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card img { transition: none !important; }
}

/* --- Ajustes mínimos para que no se tapen --- */
.product-card h3{
  z-index: 2;              /* el título queda visible */
  min-height: 44px;        /* base para calcular el hueco del cupón */
}

/* --- Barra de cupón flotante sobre la imagen --- */
.product-card .coupon-bar{
  position: absolute;
  bottom: 0px;            /* queda por ENCIMA del título (que está en bottom:0) */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  background: #ffe082;                     /* amarillo suave */
  color: #111;
  border: 1px dashed #f0b429;
  border-radius: 10px;
  padding: 2px 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.product-card .coupon-msg{
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
}

/* botón compacto con el código visible */
.product-card .coupon-bar .copy-mini{
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  background: #111827;
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, background .2s ease;
}
.product-card .coupon-bar .copy-mini:hover{ transform: translateY(-1px); opacity: .95; }
.product-card .coupon-bar .copy-mini:active{ transform: translateY(0); opacity: .9; }

/* responsive: deja un pelín más de hueco en móviles por si el título ocupa 2 líneas */
@media (max-width: 480px){
  .product-card .coupon-bar{ bottom: 0px; left:10px; right: 10px; margin-right: 0px; width: 100% }
  .product-card .coupon-msg{ font-size: 14px; }
  .product-card .coupon-bar .copy-mini{ font-size: 12px; padding: 8px 10px; }
}

/* ==== Overrides para título, badge y cupón (colócalos al final) ==== */

/* El contenedor de imagen debe ser relativo */
.product-card picture { position: relative; aspect-ratio: 16/9; display:block; }

/* Título DEBAJO de la imagen */
.title-link { display:block; text-decoration:none; }
.product-card h3{
  position: static !important;
  background: transparent !important;
  margin: 10px 12px 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
  text-align: center;
}

/* % del store (discountedpercent) – badge rojo, arriba derecha */
.product-card .discount-badge{
  position:absolute;
  top:10px; right:10px;
  z-index:3;
  background: linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff;
  border: 1px solid rgba(255,255,255,.25);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  pointer-events:none;
}

/* Cupón (message + code) – barra amarilla, abajo derecha, compacta */
.coupon-bar{
  position:absolute;
  right:10px; bottom:10px;
  z-index:4;
  display:flex; align-items:center; gap:8px;
  max-width:85%;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(255, 235, 141, .95); /* amarillo suave */
  color:#111827;
  border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.coupon-msg{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: clamp(120px, 38vw, 260px);
  font-weight:700;
  font-size:12px;
}

.copy-mini{
  appearance:none; border:0;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px; font-weight:800;
  background:#111827; color:#fff;
  cursor:pointer;
}
.copy-mini:hover{ filter:brightness(1.12); }

@media (max-width:480px){
  .coupon-bar{ padding:5px 8px; gap:6px; max-width:90%; }
  .copy-mini{ padding:5px 10px; font-size:11px; }
  .product-card h3{ font-size:14px; }
}

/* Cards más grandes */
.grid-container{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:22px;
  padding:24px;
}

/* Fuerza 2 columnas en móvil */
/*@media (max-width: 768px){
  .grid-container{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:14px;
  }
}*/
/* El contenedor de la imagen debe ser relativo (por si acaso) */
.product-card picture{ position:relative; aspect-ratio:16/9; display:block; }

/* Badge % store (arriba-dcha, redondito) – lo mantenemos */
.product-card .discount-badge{
  position:absolute; top:10px; right:10px; z-index:3;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800;
  letter-spacing:.2px; box-shadow:0 6px 16px rgba(0,0,0,.35); pointer-events:none;
}

/* Barra de cupón – ocupa el ancho interno y puede crecer en altura */
.coupon-bar{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:4;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,235,141,.95); /* amarillo suave */
  color:#111827;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Mensaje multilinea (se expande hacia abajo) */
.coupon-msg{
  flex:1 1 100%;          /* ocupa toda la fila arriba */
  white-space:normal;
  word-break:break-word;
  overflow:hidden;        /* evita desbordes feos */
  font-weight:700;
  font-size:13px;
  line-height:1.25;
  margin-right:6px;
}

/* Línea con "Código:" + código */
.coupon-codewrap{
  display:flex; align-items:center; gap:6px;
  flex:0 1 auto;
}
.coupon-label{ font-weight:800; } /* "Código:" en negrita */
.coupon-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.18);
  display: inline-block;
  max-width: 180px;     /* ajusta a tu diseño */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.coupon-code:hover {
  white-space: normal;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
}


/* Botón copiar */
.copy-mini{
  appearance:none; border:0; border-radius:999px;
  padding:6px 12px; font-size:12px; font-weight:800;
  background:#111827; color:#fff; cursor:pointer;
}
.copy-mini:hover{ filter:brightness(1.12); }

/* Título DEBAJO de la imagen (asegura layout) */
.title-link{ display:block; text-decoration:none; }
.product-card h3{
  position:static !important; background:transparent !important;
  margin:10px 12px 12px; padding:0;
  font-size:15px; font-weight:700; color:#e5e7eb; text-align:center;
}

/* Ajustes móviles */
@media (max-width:480px){
  .coupon-bar{ padding:8px 10px; }
  .coupon-msg{ font-size:14px; }
  .copy-mini{ font-size:12px; padding:8px 12px; }
  .product-card h3{ font-size:14px; }
}

/* MENU MODERNO */
/* ===== Menú escritorio moderno – v2 (más grande, pulido) ===== */
.desktop-menu.modern { display:flex; align-items:center; }

.desktop-menu.modern .menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:14px;
}

/* tamaño y apariencia coherente también para <button> */
.desktop-menu.modern .nav-link,
.desktop-menu.modern .dropdown-toggle{
  all: unset;                     /* evita estilos feos del botón por defecto */
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer;
  padding:12px 16px;
  font: 700 clamp(14px, 1.2vw, 16px)/1 "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#e5e7eb; text-decoration:none;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .15s ease;
}

.desktop-menu.modern .nav-link:hover,
.desktop-menu.modern .dropdown-toggle:hover{
  color:var(--lecilogo-color);
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.22);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* subrayado/shine */
.desktop-menu.modern .nav-link::after,
.desktop-menu.modern .dropdown-toggle::after{
  content:""; position:absolute; inset:auto 16px 7px 16px; height:2px;
  background:linear-gradient(90deg, transparent, var(--lecilogo-color), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.desktop-menu.modern .nav-link:hover::after,
.desktop-menu.modern .dropdown-toggle:hover::after{ transform:scaleX(1); }

/* CTA de descuentos (más vistosa) */
.desktop-menu.modern .btn-cta{
  background:linear-gradient(90deg, #3DF807 0%, #7CFB42 100%);
  color:#081309; border:none;
  box-shadow: 0 10px 24px rgba(61,248,7,.25);
}
.desktop-menu.modern .btn-cta:hover{ filter:brightness(1.03); transform:translateY(-2px); }
.desktop-menu.modern .btn-cta::after{ display:none; }

/* “Más” grande y claro */
.desktop-menu.modern .has-dropdown .dropdown-toggle{
  min-width: 120px;               /* que no se vea enano */
  justify-content: center;
  position: relative;
}
.desktop-menu.modern .chevron{
  font-size: 14px; margin-left: 4px;
  transition: transform .2s ease, opacity .2s ease;
  opacity:.9;
}
.desktop-menu.modern .has-dropdown.open .chevron{ transform: rotate(180deg); }

/* Panel del dropdown (más elegante) */
.desktop-menu.modern .dropdown-panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:20;
  min-width: 300px;
  padding: 12px;
  background: rgba(14,18,26,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
  display:none;
}
.desktop-menu.modern .dropdown-panel::before{
  content:""; position:absolute; top:-7px; right:28px; width:14px; height:14px;
  transform: rotate(45deg);
  background: inherit;
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
}

/* Items del panel */
.desktop-menu.modern .dropdown-panel a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  color:#e5e7eb; text-decoration:none;
  border-radius:10px;
  transition: background .18s ease, transform .12s ease;
  font-weight:600;
}
.desktop-menu.modern .dropdown-panel a:hover{
  background: rgba(255,255,255,.07);
  transform: translateX(4px);
}

.desktop-menu.modern .has-dropdown.open .dropdown-panel{ display:block; }

/* Accesibilidad */
.desktop-menu.modern .nav-link:focus-visible,
.desktop-menu.modern .dropdown-toggle:focus-visible,
.desktop-menu.modern .dropdown-panel a:focus-visible{
  outline: 3px solid var(--lecilogo-color);
  outline-offset: 2px;
  border-radius: 12px;
}
/* Fijar el dropdown justo bajo el botón “Más” */
.desktop-menu.modern .has-dropdown{ position: relative; }

.desktop-menu.modern .dropdown-panel{
  left: 0;                 /* ancla al borde izquierdo del botón */
  right: auto;             /* deja de pegarse al borde derecho del nav */
  top: calc(100% + 12px);  /* se coloca debajo */
}

/* Flechita del panel alineada al botón */
.desktop-menu.modern .dropdown-panel::before{
  left: 28px;              /* apunta al centro aprox. del botón */
  right: auto;
}

/* Mostrar el panel tanto por :hover como por la clase .open */
.desktop-menu.modern .has-dropdown:hover .dropdown-panel,
.desktop-menu.modern .has-dropdown.open .dropdown-panel{
  display: block;
}

/* Clear (❌) del buscador */
.search-container{ position:relative; }
.search-container .clear-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:none; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  border:0; background:transparent; color:#cbd5e1;
  font-size:18px; cursor:pointer;
}
.search-container .clear-btn:hover{ color:#fff; }
.search-container.has-value .clear-btn{ display:inline-flex; }
/* deja sitio a la X */
header input[type="text"]{ padding-right:36px; }