/* Ludoteka Home V3 - diseño nuevo (override sobre Bootstrap + style.css)
   Se carga DESPUÉS de style.css. */

/* ===== Tokens ===== */
:root{
  --ludo-blue:#0b74e6;
  --ludo-blue-2:#0a66cc;
  --ludo-bg:#f6f8fb;
  --ludo-text:#0f172a;
  --ludo-muted:#64748b;
  --ludo-card:#ffffff;
  --ludo-border:rgba(15,23,42,.08);
  --ludo-shadow:0 10px 30px rgba(15,23,42,.08);
  --ludo-radius:18px;
}

html,body{background:var(--ludo-bg);}
body{color:var(--ludo-text);}

/* ===== Barra azul (más baja y con mejor alineación) ===== */
.navbar.bg-primary{
  background:var(--ludo-blue)!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}
.navbar.bg-primary .nav-link{
  padding:8px 14px!important;
  line-height:1.15!important;
}
.navbar.bg-primary img{max-height:36px; width:auto;}

/* ===== Icono carro (integrado) ===== */
.osahan-top-nav .nav-link,
.osahan-nav-top .nav-link{position:relative;}
/* Apunta al anchor que contiene feather icon de shopping-cart */
.osahan-top-nav a[href*="CARRO"],
.osahan-top-nav a[href*="carro"],
.osahan-top-nav a[href*="CARRITO"],
.osahan-top-nav a[href*="carrito"],
.osahan-top-nav a[href*="CART"],
.osahan-top-nav a[href*="cart"]{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 14px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid var(--ludo-border)!important;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.osahan-top-nav a[href*="CARRO"] svg,
.osahan-top-nav a[href*="carro"] svg,
.osahan-top-nav a[href*="CARRITO"] svg,
.osahan-top-nav a[href*="carrito"] svg,
.osahan-top-nav a[href*="CART"] svg,
.osahan-top-nav a[href*="cart"] svg{
  width:18px!important;
  height:18px!important;
}

/* Badge del carrito (si existe span con class badge) */
.osahan-top-nav a .badge{
  border-radius:999px!important;
  padding:4px 7px!important;
  font-size:12px!important;
  line-height:1!important;
}

/* ===== HERO ===== */
.home-hero{
  padding:34px 0 18px;
}
.hero-shell{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
.hero-copy{
  background:linear-gradient(135deg,#ffffff 0%, #ffffff 55%, rgba(11,116,230,.06) 100%);
  border:1px solid var(--ludo-border);
  border-radius:var(--ludo-radius);
  padding:28px 28px 22px;
  box-shadow:var(--ludo-shadow);
}
.hero-kicker{
  margin:0 0 10px;
  color:var(--ludo-muted);
  font-weight:600;
  letter-spacing:.4px;
}
.hero-title{
  margin:0 0 12px;
  font-size:44px;
  line-height:1.06;
  font-weight:800;
}
.hero-subtitle{
  margin:0 0 18px;
  color:var(--ludo-muted);
  font-size:16px;
  line-height:1.6;
  max-width:58ch;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 18px;
}
.btn-ludo-primary{
  background:var(--ludo-blue)!important;
  border-color:var(--ludo-blue)!important;
  color:#fff!important;
  border-radius:999px!important;
  padding:10px 16px!important;
  font-weight:700!important;
}
.btn-ludo-primary:hover{background:var(--ludo-blue-2)!important;border-color:var(--ludo-blue-2)!important;}
.btn-ludo-ghost{
  background:transparent!important;
  border:1px solid var(--ludo-border)!important;
  color:var(--ludo-text)!important;
  border-radius:999px!important;
  padding:10px 16px!important;
  font-weight:700!important;
}
.btn-ludo-ghost:hover{background:#fff!important;}

.hero-highlights{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:6px;
}
.hl{
  background:#fff;
  border:1px solid var(--ludo-border);
  border-radius:14px;
  padding:12px 12px 10px;
}
.hl-title{font-weight:800; font-size:13px; margin-bottom:2px;}
.hl-desc{color:var(--ludo-muted); font-size:12.5px; line-height:1.35;}

.hero-card{
  border-radius:var(--ludo-radius);
  background:linear-gradient(135deg, rgba(11,116,230,.12), rgba(11,116,230,.04));
  border:1px solid rgba(11,116,230,.22);
  box-shadow:var(--ludo-shadow);
  padding:18px;
  display:flex;
}
.hero-card-inner{
  background:rgba(255,255,255,.85);
  border:1px solid var(--ludo-border);
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
}
.hero-card-badge{
  display:inline-block;
  align-self:flex-start;
  background:rgba(11,116,230,.14);
  color:var(--ludo-blue-2);
  border:1px solid rgba(11,116,230,.25);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  margin-bottom:10px;
}
.hero-card-title{
  margin:0 0 8px;
  font-weight:900;
  font-size:22px;
}
.hero-card-text{
  margin:0 0 14px;
  color:var(--ludo-muted);
  line-height:1.55;
}
.btn-ludo-secondary{
  background:#16a34a!important;
  border-color:#16a34a!important;
  color:#fff!important;
  border-radius:999px!important;
  padding:10px 16px!important;
  font-weight:800!important;
}
.btn-ludo-secondary:hover{filter:brightness(.95);}

/* ===== Secciones ===== */
.home-section{
  padding:26px 0;
}
.home-section-alt{
  background:rgba(15,23,42,.03);
  border-top:1px solid var(--ludo-border);
  border-bottom:1px solid var(--ludo-border);
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:14px;
}
.section-title{
  margin:0;
  font-weight:900;
  font-size:22px;
  letter-spacing:.2px;
}
.section-link{
  color:var(--ludo-blue-2);
  font-weight:800;
  text-decoration:none;
}
.section-link:hover{text-decoration:underline;}

/* ===== Cards existentes (osahan-card) mejoradas ===== */
.product-row{margin-left:-10px; margin-right:-10px;}
.product-row > [class*="col-"]{padding-left:10px; padding-right:10px; margin-bottom:18px;}

.osahan-card{
  border-radius:18px!important;
  border:1px solid var(--ludo-border)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  overflow:hidden;
}
.osahan-card .card-body{padding:16px 16px 14px!important;}
.osahan-card .card-title{font-weight:900!important; color:var(--ludo-text)!important;}
.osahan-card .text-muted{color:var(--ludo-muted)!important;}

/* Imagen de producto: reducir “blanco” y mantener proporción */
.osahan-card img{
  display:block;
  width:100%;
  height:240px;              /* Ajusta visualmente el “marco” */
  object-fit:contain;        /* Si prefieres recorte: cambia a cover */
  background:#fff;
}

/* CTA / botones dentro de cards */
.osahan-card .btn{
  border-radius:999px!important;
  font-weight:800!important;
}

/* Usados: el markup es distinto; forzamos un card look sin tocar HTML */
.usados-row .col-md-3,
.usados-row .col-lg-3{margin-bottom:18px;}
.usados-row img{border-radius:16px;}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .hero-shell{grid-template-columns:1fr;}
  .hero-title{font-size:38px;}
  .hero-highlights{grid-template-columns:1fr; gap:8px;}
  .osahan-card img{height:220px;}
}
@media (max-width: 576px){
  .home-hero{padding-top:22px;}
  .hero-copy{padding:22px 18px;}
  .hero-title{font-size:32px;}
  .osahan-card img{height:200px;}
}


/* ===== Ludoteka Header v4 (rework) ===== */
.ltk-header { position: sticky; top: 0; z-index: 1020; background: #fff; }

.ltk-topbar { background: #fff; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.ltk-topbar-inner {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
}

.ltk-logo img { height: 44px; width: auto; display: block; }

.ltk-search { max-width: 760px; margin: 0 auto; }
.ltk-search .form-control { height: 46px; border-radius: 999px 0 0 999px; }
.ltk-search .btn { height: 46px; border-radius: 0 999px 999px 0; padding: 0 16px; }

.ltk-actions { display: flex; gap: 10px; align-items: center; }
.ltk-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  position: relative;
}
.ltk-action:hover { background: rgba(13, 110, 253, 0.06); border-color: rgba(13, 110, 253, 0.35); text-decoration: none; }
.ltk-action-icon {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.10);
  color: #0d6efd;
  font-size: 16px;
}
.ltk-action-text { font-weight: 600; font-size: 14px; white-space: nowrap; }

.ltk-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.18);
}

/* Categorías: barra clara + ícono en "chip" azul */
.ltk-catbar {
  background: #fff;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}
.ltk-catlist {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.ltk-catitem { margin: 0; padding: 0; }

.ltk-catlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.ltk-catlink:hover {
  transform: translateY(-1px);
  border-color: rgba(13, 110, 253, 0.35);
  background: rgba(13, 110, 253, 0.06);
  text-decoration: none;
}
.ltk-caticon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d6efd;
}
.ltk-caticon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  /* Si tus íconos son blancos, aquí quedan perfectos por el fondo azul */
  filter: none;
}
.ltk-cattext { font-weight: 600; font-size: 14px; }

/* Responsive */
@media (max-width: 991px) {
  .ltk-topbar-inner { grid-template-columns: 1fr; }
  .ltk-search { max-width: none; }
  .ltk-actions { justify-content: flex-end; }
}

/* =========================
   CATEGORÍAS: una sola línea
   ========================= */

.ltk-catbar .container{
  /* si tu layout usa container Bootstrap, esto asegura que el UL tenga espacio */
  width: 100%;
}

.ltk-catlist{
  list-style: none;
  margin: 0;
  padding: 14px 0;

  display: flex;
  flex-wrap: nowrap;       /* CLAVE: no permitir salto */
  align-items: center;
  justify-content: center;

  gap: 14px;

  overflow-x: auto;        /* fallback si no alcanza el ancho */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.ltk-catitem{
  flex: 0 0 auto;          /* CLAVE: cada item mantiene su tamaño */
}

.ltk-catlink{
  display: inline-flex;
  align-items: center;
  gap: 10px;

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

  border: 1px solid #e6e9ef;
  background: #fff;

  text-decoration: none;
  white-space: nowrap;     /* CLAVE: el texto no baja */
}

.ltk-caticon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #0d6efd;     /* círculo */
  flex: 0 0 auto;
}

.ltk-caticon img{
  width: 22px;
  height: 22px;
  object-fit: contain;

  /* para íconos blancos: */
  filter: brightness(0) invert(1);
}

.ltk-cattext{
  font-weight: 700;
  color: #111827;
  font-size: 14px;
}


.ltk-catlist{ gap: 10px; }

.ltk-catlink{
  padding: 8px 10px;
  gap: 8px;
}

.ltk-caticon{
  width: 36px;
  height: 36px;
}

.ltk-caticon img{
  width: 18px;
  height: 18px;
}

.ltk-cattext{
  font-size: 13px;
}

/* =========================
   Ludoteka v2 - Botones
   ========================= */

/* Tokens mínimos (si ya los tienes, deja solo los que falten) */
:root{
  --ltk-text-main: #0f172a;
  --ltk-text-body: #475569;
  --ltk-border: #e6ebf1;

  --ltk-blue: #0b5cff;
  --ltk-blue-soft: #e8f0ff;

  --ltk-accent: #ff8a00;
  --ltk-accent-soft: #fff3e0;

  --ltk-green: #16a34a;
  --ltk-green-soft: #eaf7ef;
}

/* Base botón */
.ltk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 44px;
  padding: 0 18px;

  border-radius: 999px;
  border: 1px solid transparent;

  font-weight: 700;
  font-size: 15px;
  line-height: 1;

  cursor: pointer;
  user-select: none;
  text-decoration: none;

  transition: transform .06s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

.ltk-btn:active{ transform: translateY(1px); }
.ltk-btn:focus{ outline: none; }
.ltk-btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(11,92,255,.20);
}

/* Tamaños */
.ltk-btn--sm{ height: 38px; padding: 0 14px; font-size: 14px; }
.ltk-btn--lg{ height: 50px; padding: 0 22px; font-size: 16px; }

/* Icono dentro del botón (si usas <i> o <svg>) */
.ltk-btn__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   Variantes
   ========================= */

/* Primario (acciones principales) */
.ltk-btn--primary{
  background: var(--ltk-blue);
  color: #fff;
  box-shadow: 0 10px 20px rgba(11,92,255,.18);
}
.ltk-btn--primary:hover{
  box-shadow: 0 14px 26px rgba(11,92,255,.22);
}

/* Secundario (acción alternativa, borde) */
.ltk-btn--secondary{
  background: #fff;
  color: var(--ltk-text-main);
  border-color: var(--ltk-border);
}
.ltk-btn--secondary:hover{
  background: #f8fafc;
  border-color: #d8e0ea;
}

/* Acento (explorar / energía) */
.ltk-btn--accent{
  background: var(--ltk-accent);
  color: #111827;
  box-shadow: 0 10px 20px rgba(255,138,0,.18);
}
.ltk-btn--accent:hover{
  box-shadow: 0 14px 26px rgba(255,138,0,.22);
}

/* Beneficio / promo (envío gratis, ofertas) */
.ltk-btn--success{
  background: var(--ltk-green);
  color: #fff;
  box-shadow: 0 10px 20px rgba(22,163,74,.18);
}
.ltk-btn--success:hover{
  box-shadow: 0 14px 26px rgba(22,163,74,.22);
}

/* Link-button (como “Ver todo”) */
.ltk-btn--link{
  background: transparent;
  border-color: transparent;
  color: var(--ltk-blue);
  padding: 0;
  height: auto;
  border-radius: 0;
  font-weight: 700;
}
.ltk-btn--link:hover{
  text-decoration: underline;
}

/* Deshabilitado */
.ltk-btn[disabled],
.ltk-btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* =========================
   Botones “pill” header (Carro / Mi cuenta)
   ========================= */
.ltk-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ltk-border);
  color: var(--ltk-text-main);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.ltk-pill:hover{
  background: #f8fafc;
  border-color: #d8e0ea;
}
.ltk-pill__bubble{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ltk-blue-soft);
  color: var(--ltk-blue);
}

/* =========================
   LUDOTEKA v2 – Color System + Buttons
   Pegar al FINAL de ludoteka-home-v4.css
   ========================= */

:root{
  --ludo-primary: #FF6A00;       /* Naranja marca / CTA */
  --ludo-primary-700:#E85F00;
  --ludo-secondary:#1463FF;      /* Azul UI / soporte */
  --ludo-success:#16A34A;

  --ludo-ink:#0F172A;
  --ludo-muted:#64748B;
  --ludo-bg:#F6F8FB;
  --ludo-surface:#FFFFFF;
  --ludo-border:#E6EAF2;

  --ludo-radius: 999px;
  --ludo-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

/* Base botones: coherencia visual */
.btn-ludo-primary,
.btn-ludo-secondary,
.btn-ludo-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  padding: 10px 18px;
  border-radius: var(--ludo-radius);
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  text-decoration:none !important;
  box-shadow: none;
}

/* PRIMARY = NARANJA (CTA principal) */
.btn-ludo-primary{
  background: var(--ludo-primary) !important;
  border: 1px solid var(--ludo-primary) !important;
  color: #fff !important;
}
.btn-ludo-primary:hover{
  background: var(--ludo-primary-700) !important;
  border-color: var(--ludo-primary-700) !important;
  transform: translateY(-1px);
  box-shadow: var(--ludo-shadow);
}
.btn-ludo-primary:active{ transform: translateY(0); }

/* SECONDARY = outline azul (secundario real, no compite) */
.btn-ludo-secondary{
  background: transparent !important;
  border: 2px solid rgba(20, 99, 255, .25) !important;
  color: var(--ludo-secondary) !important;
}
.btn-ludo-secondary:hover{
  background: rgba(20, 99, 255, .08) !important;
  border-color: rgba(20, 99, 255, .35) !important;
  transform: translateY(-1px);
}

/* GHOST = outline neutro (terciario) */
.btn-ludo-ghost{
  background: #fff !important;
  border: 1px solid var(--ludo-border) !important;
  color: var(--ludo-ink) !important;
}
.btn-ludo-ghost:hover{
  background: #fff !important;
  border-color: rgba(15, 23, 42, .18) !important;
  transform: translateY(-1px);
}

/* Focus accesible (teclado) */
.btn-ludo-primary:focus,
.btn-ludo-secondary:focus,
.btn-ludo-ghost:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(255, 106, 0, .22) !important;
}

/* Botón "Agregar" (en cards) que hoy hereda bootstrap btn-sm */
.btn.btn-sm.btn-ludo-primary{
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--ludo-radius);
  font-weight: 900;
}

/* Links tipo botón (ej: "Ver todo") más moderno */
.section-link{
  color: var(--ludo-secondary) !important;
  font-weight: 800;
  text-decoration: none !important;
}
.section-link:hover{
  color: var(--ludo-primary) !important;
  text-decoration: none !important;
}

/* Opcional: Badge de envío gratis más “marca” (no rojo) */
.hero-card-badge{
  background: rgba(255, 106, 0, .12) !important;
  color: var(--ludo-primary) !important;
  border: 1px solid rgba(255, 106, 0, .25) !important;
  font-weight: 900;
  border-radius: var(--ludo-radius);
}

/* Ajuste fino: que los botones del hero se vean “premium” */
.hero-actions .btn-ludo-primary{ box-shadow: 0 10px 24px rgba(255, 106, 0, .25); }
.hero-actions .btn-ludo-primary:hover{ box-shadow: 0 14px 34px rgba(255, 106, 0, .28); }

/* =========================
   FIX: formas curvas vs tarjetas
   ========================= */

/* Contenedor principal del hero izquierdo */
.hero-card{
  position: relative;
  overflow: hidden;              /* CLAVE */
  border-radius: 28px;            /* coherente con el diseño */
  background: var(--ludo-surface);
  z-index: 1;
}

/* Fondo decorativo curvo */
.hero-card::before{
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(255, 106, 0, 0.08),
    transparent 60%
  );
  z-index: 0;
}

/* Todo el contenido real arriba del fondo */
.hero-card > *{
  position: relative;
  z-index: 1;
}

/* Promo derecha (Envío gratis) */
.promo-card{
  position: relative;
  overflow: hidden;              /* CLAVE */
  border-radius: 28px;
  background: var(--ludo-surface);
}

.promo-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(
    circle at 60% 40%,
    rgba(20, 99, 255, 0.10),
    transparent 65%
  );
  z-index:0;
}

.promo-card > *{
  position:relative;
  z-index:1;
}

/* =========================
   BOTONES LUDOTEKA V2
   ========================= */

/* Base */
.ltk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  transition:all .2s ease;
  border:1px solid transparent;
}

/* Primario */
.ltk-btn-primary{
  background:#ff6a00;
  color:#fff;
  box-shadow:0 8px 20px rgba(255,106,0,.25);
}
.ltk-btn-primary:hover{
  background:#e85f00;
  transform:translateY(-1px);
}

/* Secundario */
.ltk-btn-secondary{
  background:#fff;
  color:#0f172a;
  border-color:#e5eaf3;
}
.ltk-btn-secondary:hover{
  border-color:#ff6a00;
  color:#ff6a00;
}

/* Contextual / outline */
.ltk-btn-outline{
  background:#fff;
  color:#2563eb;
  border-color:#bfd3ff;
}
.ltk-btn-outline:hover{
  background:rgba(37,99,235,.05);
}

.ltk-hero-oval {
  width: 120%;
  height: 140%;
  top: -20%;
  left: -10%;
}

.ltk-hero::before{
  content:'';
  position:absolute;
  width:120%;
  height:140%;
  top:-20%;
  left:-10%;
  background:#fff;
  border-radius:50%;
  z-index:0;
}

.ltk-hero-content{
  position:relative;
  z-index:1;
}

/* =========================
   FIX ÓVALO HERO IZQUIERDO
   (decoración que no “corta” texto)
   ========================= */

/* 1) El panel izquierdo pasa a tener el óvalo decorativo */
.hero-copy{
  position: relative;
  overflow: hidden;          /* para que el blob no se vea fuera del card */
}

/* 2) Blob/óvalo grande de fondo */
.hero-copy::before{
  content:"";
  position:absolute;
  width: 155%;
  height: 175%;
  top: -35%;
  left: -25%;
  border-radius: 50%;

  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  
  /* Un degradado suave (no “borde”), evita la sensación de marco que no alcanza */

  z-index: 0;
  pointer-events: none;
}

/* 3) Todo el contenido del hero por arriba del blob */
.hero-copy > *{
  position: relative;
  z-index: 1;
}

/* ===========================
   FIX: óvalo/blob NO debe recortar ni tapar contenido
   =========================== */

/* 1) Asegura contexto de capas en el HERO */
.hero-section { position: relative; }

/* 2) El contenido del hero siempre arriba */
.hero-grid,
.hero-copy,
.hero-promo {
  position: relative;
  z-index: 2;
}

/* 3) Si el óvalo/blob está como elemento directo dentro del hero (div o svg), mándalo atrás */
.hero-section > svg,
.hero-section > .hero-oval,
.hero-section > .hero-blob,
.hero-section > .hero-bg,
.hero-section > .hero-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  max-width: none;
}

/* 4) Si el óvalo/blob quedó metido dentro de las cards (hero-copy / hero-promo), también atrás */
.hero-copy > svg,
.hero-copy > .hero-oval,
.hero-copy > .hero-blob,
.hero-copy > .hero-bg,
.hero-copy > .hero-shape,
.hero-promo > svg,
.hero-promo > .hero-oval,
.hero-promo > .hero-blob,
.hero-promo > .hero-bg,
.hero-promo > .hero-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* 5) El contenido interno de las cards arriba de cualquier decorativo */
.hero-copy * ,
.hero-promo * {
  position: relative;
  z-index: 2;
}

/* 6) Badge/pill (“Bienvenido a Ludoteka” y “Envío gratis”) siempre debe “calzar” el texto */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

/* FIX: el óvalo (::before) debe quedar detrás del contenido */
.hero-copy {
  position: relative; /* ya lo tienes, pero lo reafirmamos */
  overflow: hidden;   /* ok para recortar el óvalo dentro de la card */
}

.hero-copy::before {
  z-index: 0 !important;
  pointer-events: none;
}

/* Todo el contenido real arriba del ::before */
.hero-copy > * {
  position: relative;
  z-index: 1;
}

/* =========================
   FIX DEFINITIVO: HERO (texto cortado / óvalo encima)
   Pegar AL FINAL del CSS
   ========================= */

/* 1) Asegura stacking correcto del contenedor del hero */
.home-hero .hero-copy {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate; /* crea un stacking context controlado */
}

/* 2) Fuerza el contenido del hero por encima */
.home-hero .hero-copy > * {
  position: relative;
  z-index: 2;
}

/* 3) Si existe un óvalo decorativo como pseudo-elemento, lo apaga */
.home-hero .hero-copy::before,
.home-hero .hero-copy::after {
  content: none !important;
  display: none !important;
}

/* 4) Si el óvalo viene como un elemento interno (svg/shape), lo apaga también */
.home-hero .hero-copy svg,
.home-hero .hero-copy .hero-blob,
.home-hero .hero-copy .blob,
.home-hero .hero-copy .shape,
.home-hero .hero-copy .bg-blob {
  display: none !important;
}

/* 5) Badge real para "Bienvenido a Ludoteka" (pill que NO se corta) */
.home-hero .hero-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  letter-spacing: .02em;
}

/* Opcional: un poquito de separación para que respire */
.home-hero .hero-kicker + .hero-title {
  margin-top: 12px !important;
}

/* =========================
   HERO OVAL: mantener óvalo sutil y SIEMPRE detrás
   ========================= */

/* Contenedor: stacking controlado */
.home-hero .hero-copy{
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Todo el contenido por encima */
.home-hero .hero-copy > *{
  position: relative;
  z-index: 2;
}

/* Apaga pseudo-elementos previos (si existían) para evitar “doble óvalo” */
.home-hero .hero-copy::after{
  content: none !important;
  display: none !important;
}

/* Creamos un óvalo sutil con ::before, DETRÁS del texto */
.home-hero .hero-copy::before{
  content: "";
  position: absolute;
  z-index: 1;                 /* detrás del contenido (que está en z=2) */
  pointer-events: none;

  /* Tamaño/posición del óvalo (ajústalo si quieres) */
  width: 120%;
  height: 140%;
  left: -12%;
  top: -20%;

  border-radius: 999px;

  /* Tinte muy suave (no blanco puro) */
  background: radial-gradient(
    circle at 30% 35%,
    rgba(255, 122, 0, 0.10) 0%,
    rgba(59, 130, 246, 0.08) 40%,
    rgba(15, 23, 42, 0.03) 70%,
    rgba(255, 255, 255, 0.00) 100%
  );

  /* Opcional: borde suave para que se perciba “intencional” */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05) inset;
  filter: blur(0px);
}

/* Badge pill para “Bienvenido a Ludoteka”: que envuelva SIEMPRE */
.home-hero .hero-kicker{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ============================
   OVERRIDES Ludoteka v2 (Hero)
   Pegar al final del CSS
   ============================ */

/* 1) Apaga decoraciones heredadas (óvalos viejos) */
.home-hero::before,
.home-hero::after,
.hero-shell::before,
.hero-shell::after,
.hero-copy::before,
.hero-copy::after,
.hero-promo::before,
.hero-promo::after {
  content: none !important;
  display: none !important;
}

/* 2) Fondo del hero (suave, no blanco “corte”) */
.home-hero {
  background: linear-gradient(180deg, #f7f9fc 0%, #f3f6fb 100%) !important;
}

/* 3) Crea un “glow ovalado” sutil detrás del bloque izquierdo */
.hero-shell {
  position: relative;
}

.hero-shell {
  /* glow muy suave, no se siente como contenedor */
  background-image:
    radial-gradient(ellipse at 28% 60%,
      rgba(11, 116, 230, 0.06) 0%,
      rgba(11, 116, 230, 0.03) 35%,
      rgba(11, 116, 230, 0.00) 70%);
  background-repeat: no-repeat;
}

/* 4) Asegura que el contenido NO se recorte */
.hero-copy,
.hero-promo {
  overflow: visible !important;
}

/* 5) “Bienvenido a Ludoteka” (pill) más estable y claramente intencional */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(6px);
}

/* 6) Para que el bloque blanco principal no “pelee” con el glow */
.hero-copy {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, rgba(11,116,230,0.03) 100%);
}



/* =========================================================
   FIX HERO OVAL: no tapa texto / no se recorta
   (pegar al FINAL del CSS)
   ========================================================= */

/* 1) Evitar recorte del óvalo y crear stacking controlado */
.home-hero .hero-copy{
  position: relative;
  overflow: visible !important;   /* anula el overflow:hidden que te está recortando */
  isolation: isolate;             /* permite usar z-index negativo sin “irse” detrás del layout */
}

/* 2) Mandar el óvalo SIEMPRE atrás */
.home-hero .hero-copy::before{
  z-index: -1 !important;
  opacity: .70;                   /* menos “blanco” (ajusta 0.55–0.80 a gusto) */
}

/* 3) Asegurar que el contenido quede arriba del óvalo */
.home-hero .hero-copy > *{
  position: relative;
  z-index: 1;
}

/* 4) (Opcional) Si el promo también usa óvalo/halo, misma lógica */
.home-hero .hero-promo{
  position: relative;
  isolation: isolate;
}
.home-hero .hero-promo::before{
  z-index: -1 !important;
  opacity: .65;
}
.home-hero .hero-promo > *{
  position: relative;
  z-index: 1;
}

/* 5) Kicker pill: que nunca “se salga” y se vea consistente */
.home-hero .hero-kicker{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
  background: rgba(255,255,255,.75); /* tono claro, no blanco puro */
  border: 1px solid rgba(15,23,42,.10);
}

/* =========================================================
   HERO: sacar óvalo y usar rectángulo (card) simple
   Pegar al FINAL del CSS
   ========================================================= */

/* 1) Apagar el óvalo (pseudo-elemento) */
.home-hero .hero-copy::before,
.home-hero .hero-shell::before,
.home-hero .hero-grid::before,
.home-hero .hero-promo::before{
  content: none !important;
  display: none !important;
}

/* 2) Card rectangular para el bloque izquierdo (texto) */
.home-hero .hero-copy{
  background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(241,246,255,.92) 100%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 40px rgba(2, 6, 23, .08) !important;
  padding: 34px 34px 26px !important;
  overflow: visible !important;
}

/* 3) Card rectangular para el bloque derecho (promo) */
.home-hero .hero-promo{
  background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,248,242,.92) 100%) !important;
  border: 1px solid rgba(255, 122, 24, .18) !important; /* toque naranja sutil */
  border-radius: 28px !important;
  box-shadow: 0 16px 40px rgba(2, 6, 23, .08) !important;
  padding: 28px !important;
  overflow: visible !important;
}

/* 4) (Opcional) si el contenedor trae borde extra y se ve “doble marco”, lo neutralizamos */
.home-hero .hero-shell{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ===============================
   LUDOTEKA – CATEGORY BAR v2
   =============================== */

.ltk-catbar {
  background: #ffffff;
}

.ltk-catlist {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: nowrap;
}

.ltk-catitem {
  list-style: none;
}

.ltk-catlink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: var(--ltk-text-dark);
  border: 1px solid var(--ltk-border-soft);
  background: #ffffff;
  transition: all 0.25s ease;
}

/* Icon wrapper */
.ltk-caticon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ltk-blue-soft);
  display: grid;
  place-items: center;
  transition: all 0.25s ease;
}

.ltk-caticon img {
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(33%) sepia(74%)
    saturate(2436%) hue-rotate(203deg) brightness(92%) contrast(95%);
  transition: all 0.25s ease;
}

/* ===============================
   HOVER
   =============================== */

.ltk-catlink:hover {
  border-color: var(--ltk-orange);
  box-shadow: 0 6px 18px rgba(255, 122, 0, 0.18);
  transform: translateY(-2px);
}

.ltk-catlink:hover .ltk-caticon {
  background: var(--ltk-orange-soft);
}

.ltk-catlink:hover .ltk-caticon img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(97%)
    saturate(2465%) hue-rotate(3deg) brightness(103%) contrast(101%);
}

/* ===============================
   ACTIVE (opcional si tienes clase)
   =============================== */

.ltk-catitem.active .ltk-catlink {
  border-color: var(--ltk-orange);
  color: var(--ltk-orange);
}

.ltk-catitem.active .ltk-caticon {
  background: var(--ltk-orange);
}

.ltk-catitem.active .ltk-caticon img {
  filter: brightness(0) invert(1);
}

/* =========================================
   CATBAR: sin scroll + responsive compacto
   ========================================= */

/* 1) Quitar el scroll horizontal sí o sí */
.ltk-catbar,
.ltk-catbar .container {
  overflow-x: hidden;
}

/* 2) Por defecto: permitir wrap (evita scrollbar) */
.ltk-catlist {
  flex-wrap: wrap;           /* <-- clave: ya no forza overflow */
  justify-content: center;
  row-gap: 12px;
}

/* 3) Desktop: compactar un poco para que quepa todo en 1 línea
      (si igual no cabe, baja a 2 filas, pero SIN scroll) */
.ltk-catlink {
  padding: 8px 14px;         /* antes 10px 18px */
  gap: 8px;
  font-size: 14px;
}

.ltk-caticon {
  width: 38px;               /* antes 42px */
  height: 38px;
}

.ltk-caticon img {
  width: 20px;               /* antes 22px */
  height: 20px;
}

/* 4) En pantallas medianas: aún más compacto */
@media (max-width: 1200px) {
  .ltk-catlink {
    padding: 7px 12px;
    font-size: 13px;
  }

  .ltk-caticon {
    width: 34px;
    height: 34px;
  }

  .ltk-caticon img {
    width: 18px;
    height: 18px;
  }
}

/* 5) En pantallas más angostas: ícono arriba, texto abajo (cabe mejor) */
@media (max-width: 992px) {
  .ltk-catlink {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 10px 10px;
    min-width: 110px;        /* evita que se aplasten demasiado */
  }

  .ltk-cattext {
    line-height: 1.1;
    font-size: 12px;
  }
}

/* 6) En pantallas muy angostas: reducir un poco más el “tile” */
@media (max-width: 520px) {
  .ltk-catlink {
    min-width: 96px;
    padding: 8px 8px;
  }

  .ltk-caticon {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   CATBAR: 1 sola línea SIEMPRE (sin scroll)
   ========================================================= */

.ltk-catbar,
.ltk-catbar .container {
  overflow: hidden; /* sin scrollbar horizontal */
}

/* 1 fila obligatoria */
.ltk-catlist {
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: space-between; /* reparte el espacio */
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  overflow: hidden;
}

/* Cada item puede encogerse */
.ltk-catitem {
  flex: 1 1 0;
  min-width: 0; /* clave para que el texto pueda recortarse */
}

/* Link más compacto y escalable */
.ltk-catlink {
  width: 100%;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(6px, 0.8vw, 10px) clamp(8px, 1vw, 14px);
  font-size: clamp(11px, 0.9vw, 14px);
  white-space: nowrap;
}

/* Icono escalable */
.ltk-caticon {
  width: clamp(28px, 2.5vw, 40px);
  height: clamp(28px, 2.5vw, 40px);
  flex: 0 0 auto;
}
.ltk-caticon img {
  width: clamp(16px, 1.6vw, 22px);
  height: clamp(16px, 1.6vw, 22px);
}

/* Texto recortable (si no alcanza) */
.ltk-cattext {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pantallas muy angostas: se oculta texto para mantener 1 fila */
@media (max-width: 820px) {
  .ltk-catlink { padding: 8px 8px; }
  .ltk-cattext { display: none; }
}


/* =========================================================
   CATBAR: 1 sola línea, sin scroll, sin perder texto
   (máx. 7 categorías)
   ========================================================= */

.ltk-catbar,
.ltk-catbar .container { overflow: hidden; }

/* 1 línea obligatoria, sin wrap, sin scroll */
.ltk-catlist{
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.9vw, 14px);
  overflow: hidden;
}

/* Cada item ocupa su “porción” y puede encogerse */
.ltk-catitem{
  flex: 1 1 0;
  min-width: 0;
}

/* Link compacto y escalable */
.ltk-catlink{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.7vw, 10px);
  padding: clamp(6px, 0.7vw, 10px) clamp(6px, 0.8vw, 12px);
  white-space: nowrap;
}

/* Icono: baja tamaño progresivamente */
.ltk-caticon{
  width: clamp(26px, 2.2vw, 38px);
  height: clamp(26px, 2.2vw, 38px);
  flex: 0 0 auto;
}
.ltk-caticon img{
  width: clamp(16px, 1.5vw, 22px);
  height: clamp(16px, 1.5vw, 22px);
}

/* Texto: NO elipsis, NO overflow hidden */
.ltk-cattext{
  display: inline-block;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;

  /* clave: permite que el texto “se achique” en vez de cortarse */
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1;
}

/* Extra compresión cuando el ancho ya está justo */
@media (max-width: 1100px){
  .ltk-catlink{
    gap: 6px;
    padding: 6px 6px;
  }
  .ltk-caticon{
    width: 30px;
    height: 30px;
  }
  .ltk-caticon img{
    width: 18px;
    height: 18px;
  }
  .ltk-cattext{
    font-size: 11px;
  }
}

/* Último escalón (sin ocultar texto): ícono mínimo + texto mínimo */
@media (max-width: 900px){
  .ltk-caticon{
    width: 26px;
    height: 26px;
  }
  .ltk-caticon img{
    width: 16px;
    height: 16px;
  }
  .ltk-cattext{
    font-size: 10.5px;
  }
}

/* =========================
   LUDOTEKA v2 — BOTONES (override final)
   ========================= */

/* Tokens mínimos para botones */
:root{
  --ltk-primary: #ff6a00;         /* Naranjo principal */
  --ltk-primary-700: #e85e00;     /* Hover */
  --ltk-primary-800: #cc5300;     /* Active */
  --ltk-primary-100: #fff0e6;     /* Fondo suave */

  --ltk-text: #0f172a;
  --ltk-muted: #64748b;

  --ltk-border: #e6eef7;
  --ltk-border-strong: #d7e3f3;

  --ltk-radius-btn: 999px;
  --ltk-shadow-btn: 0 10px 20px rgba(15, 23, 42, .10);
  --ltk-shadow-btn-hover: 0 12px 26px rgba(15, 23, 42, .14);

  --ltk-focus: rgba(255, 106, 0, .35);
}

/* Base botón (sirve para .btn y para <a class="btn">) */
.btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: var(--ltk-radius-btn);
  padding: 12px 18px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease, color .18s ease;
  transform: translateZ(0); /* evita “jitter” */
}

.btn-sm{
  padding: 10px 14px;
  font-size: 14px;
}

/* Primary */
.btn-ludo-primary{
  background: var(--ltk-primary);
  color: #fff;
  box-shadow: var(--ltk-shadow-btn);
}

.btn-ludo-primary:hover{
  background: var(--ltk-primary-700);
  box-shadow: var(--ltk-shadow-btn-hover);
}

.btn-ludo-primary:active{
  background: var(--ltk-primary-800);
  transform: translateY(1px);
}

/* Secondary (blanco con borde suave) */
.btn-ludo-secondary{
  background: #fff;
  color: var(--ltk-text);
  border-color: var(--ltk-border-strong);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .06);
}

.btn-ludo-secondary:hover{
  background: var(--ltk-primary-100);
  border-color: rgba(255, 106, 0, .25);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .10);
}

.btn-ludo-secondary:active{
  transform: translateY(1px);
}

/* Ghost (tipo link/botón liviano) */
.btn-ludo-ghost{
  background: transparent;
  color: var(--ltk-text);
  border-color: transparent;
  box-shadow: none;
  padding-left: 10px;
  padding-right: 10px;
}

.btn-ludo-ghost:hover{
  background: rgba(2, 132, 199, .06); /* suave, no compite con el naranjo */
}

/* Estados disabled */
.btn[disabled],
.btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* Focus accesible (teclado) */
.btn:focus{ outline: none; }
.btn:focus-visible{
  box-shadow: 0 0 0 4px var(--ltk-focus), var(--ltk-shadow-btn);
}

/* Si tienes botones dentro de .hero-actions, evita que “salten” */
.hero-actions .btn{
  min-height: 44px;
}


/* ===== PATCH SEGURO: Categorías 1 línea sin scroll (no borrar CSS anterior) ===== */

/* 1) Prohibir scroll horizontal solo en la barra de categorías */
.ltk-catbar { overflow: hidden; }

/* 2) 1 línea sí o sí */
.ltk-catbar .ltk-catlist{
  display: flex;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  gap: 12px;
}

/* 3) Que cada item pueda encogerse sin romper el layout */
.ltk-catbar .ltk-catitem{
  flex: 0 1 auto;
  min-width: 0;
}

/* 4) Encoger un poco (sin cortar texto) */
.ltk-catbar .ltk-catlink{
  white-space: nowrap !important;
  padding: 10px 12px;
  gap: 10px;
  font-size: 13px;
}

/* 5) Encoger icono */
.ltk-catbar .ltk-caticon{
  width: 34px;
  height: 34px;
}
.ltk-catbar .ltk-caticon img{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* =========================================================
   FEATURED (Destacados) — ÚNICO BLOQUE OFICIAL
   - Sin hueco (mosaico correcto)
   - Cards mismo alto
   ========================================================= */

.ltk-featured__grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;

  /* neutraliza bootstrap row/cols si vienen mezclados */
  margin-left: 0 !important;
  margin-right: 0 !important;

  /* comportamiento estable de filas */
  grid-auto-flow: dense;
  grid-auto-rows: 320px; /* ajusta a gusto */
  align-items: stretch;
}

.ltk-featured__grid > .ltk-featured__item{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  flex: none !important;

  display: flex;
}

/* Card full height */
.ltk-featured__grid .ltk-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 18px !important;
  overflow: hidden;
}

.ltk-featured__grid .ltk-card__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ltk-featured__grid .ltk-card__bottom{
  margin-top: auto; /* CTA y precio abajo */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

/* Clamp para que el texto no cambie altura */
.ltk-featured__grid .ltk-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  
}
.ltk-featured__grid .ltk-card__meta,
.ltk-featured__grid .ltk-featured-copy{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Imagen base */
.ltk-featured__grid .ltk-card img{
  height: 220px;
  object-fit: contain;
  background: #fff;
}

/* ===== Mosaico (elimina el hueco) =====
   1) Destacado: 2 cols x 2 filas
   2–5) 2x2 a la derecha
*/
.ltk-featured__grid > .ltk-featured__item:first-child{
  grid-column: 1 / span 2 !important;
  grid-row: 1 / span 2 !important;
}

/* Posiciona 2–5 explícitamente */
.ltk-featured__grid > .ltk-featured__item:nth-child(2){ grid-column: 3; grid-row: 1; }
.ltk-featured__grid > .ltk-featured__item:nth-child(3){ grid-column: 4; grid-row: 1; }
.ltk-featured__grid > .ltk-featured__item:nth-child(4){ grid-column: 3; grid-row: 2; }
.ltk-featured__grid > .ltk-featured__item:nth-child(5){ grid-column: 4; grid-row: 2; }

/* Imagen del destacado ocupa “doble altura” */
.ltk-featured__grid > .ltk-featured__item:first-child .ltk-card img{
  height: 520px; /* 320*2 - margen aprox */
  padding: 8px 6px;
}

/* Badge del destacado */
.ltk-featured__grid > .ltk-featured__item:first-child .ltk-card{
  position: relative;
  border-color: rgba(255,106,0,.22) !important;
  box-shadow: 0 18px 44px rgba(2, 6, 23, .10) !important;
}
.ltk-featured__grid > .ltk-featured__item:first-child .ltk-card::before{
  content: "DESTACADO DE LA SEMANA";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,106,0,.14);
  color: #ff6a00;
  border: 1px solid rgba(255,106,0,.28);
}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .ltk-featured__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 300px;
  }
  .ltk-featured__grid > .ltk-featured__item:first-child{
    grid-column: 1 / span 3 !important;
    grid-row: 1 / span 1 !important;
  }
  .ltk-featured__grid > .ltk-featured__item:nth-child(2),
  .ltk-featured__grid > .ltk-featured__item:nth-child(3),
  .ltk-featured__grid > .ltk-featured__item:nth-child(4),
  .ltk-featured__grid > .ltk-featured__item:nth-child(5){
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .ltk-featured__grid > .ltk-featured__item:first-child .ltk-card img{
    height: 280px;
  }
}

@media (max-width: 768px){
  .ltk-featured__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 280px;
  }
}

/* =========================================================
   FIX REAL: Featured Grid sobre Bootstrap row/cols
   - neutraliza .row + .col-*
   - habilita mosaico 2 filas sin hueco
   - iguala alturas
   ========================================================= */

/* 1) El contenedor DEBE ser grid (anula .row flex) */
.row.ltk-featured__grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  grid-auto-flow: dense !important;
  grid-auto-rows: 320px !important;
  margin-left: 0 !important;   /* anula gutters negativos de .row */
  margin-right: 0 !important;
}

/* 2) Los items NO pueden conservar comportamiento .col-* */
.row.ltk-featured__grid > .ltk-featured__item{
  width: auto !important;      /* mata width:25/33/50% de .col-* */
  max-width: none !important;
  flex: none !important;       /* mata flex de columnas */
  padding-left: 0 !important;  /* mata gutters de col */
  padding-right: 0 !important;
  margin: 0 !important;
  display: flex;               /* para estirar card */
  min-width: 0;
}

/* 3) Card full-height + bottom abajo */
.row.ltk-featured__grid .ltk-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.row.ltk-featured__grid .ltk-card__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.row.ltk-featured__grid .ltk-card__bottom{
  margin-top: auto;
}

/* 4) MOSAICO (sin hueco): destacado 2 cols x 2 filas */
.row.ltk-featured__grid > .ltk-featured__item:first-child{
  grid-column: 1 / span 2 !important;
  grid-row: 1 / span 2 !important;
}

/* 5) 2x2 a la derecha (items 2–5) */
.row.ltk-featured__grid > .ltk-featured__item:nth-child(2){ grid-column: 3; grid-row: 1; }
.row.ltk-featured__grid > .ltk-featured__item:nth-child(3){ grid-column: 4; grid-row: 1; }
.row.ltk-featured__grid > .ltk-featured__item:nth-child(4){ grid-column: 3; grid-row: 2; }
.row.ltk-featured__grid > .ltk-featured__item:nth-child(5){ grid-column: 4; grid-row: 2; }

/* 6) Clamp texto para evitar alturas disparejas */
.row.ltk-featured__grid .ltk-card__title,
.row.ltk-featured__grid .ltk-featured-copy,
.row.ltk-featured__grid .ltk-card__meta{
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.row.ltk-featured__grid .ltk-card__title{ -webkit-line-clamp: 2; }
.row.ltk-featured__grid .ltk-featured-copy,
.row.ltk-featured__grid .ltk-card__meta{ -webkit-line-clamp: 2; }

/* 7) Responsive */
@media (max-width: 1200px){
  .row.ltk-featured__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 300px !important;
  }
  .row.ltk-featured__grid > .ltk-featured__item:first-child{
    grid-column: 1 / span 3 !important;
    grid-row: 1 / span 1 !important;
  }
  .row.ltk-featured__grid > .ltk-featured__item:nth-child(2),
  .row.ltk-featured__grid > .ltk-featured__item:nth-child(3),
  .row.ltk-featured__grid > .ltk-featured__item:nth-child(4),
  .row.ltk-featured__grid > .ltk-featured__item:nth-child(5){
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 768px){
  .row.ltk-featured__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 280px !important;
  }
}

/* =========================================
   FIX #1: Todas las cards mismo alto
   + precio/botón siempre abajo
   ========================================= */
.ltk-featured__grid > .ltk-featured__item{
  display: flex;               /* el item “envuelve” una card de alto completo */
}

.ltk-featured__grid > .ltk-featured__item .ltk-card{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;      /* permite empujar el bottom al fondo */
}

.ltk-featured__grid > .ltk-featured__item .ltk-card__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.ltk-featured__grid > .ltk-featured__item .ltk-card__bottom{
  margin-top: auto;            /* CLAVE: precio + CTA al fondo */
}

/* Clamps: evita que títulos/descripciones rompan la altura */
.ltk-card__title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;       /* 2 líneas */
}

.ltk-card__desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;       /* 2 líneas */
  overflow: hidden;
}

.ltk-featured-only .ltk-featured-copy{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;       /* 2 líneas */
  overflow: hidden;
}

/* =========================================
   FIX #2: Quitar “espacio raro”:
   destacado ocupa 2 filas (layout 2x2 a la derecha)
   ========================================= */
@media (min-width: 1201px){
  .ltk-featured__grid > .ltk-featured__item:first-child{
    grid-column: span 2;
    grid-row: span 2;          /* CLAVE: elimina el vacío */
  }
}

/* En pantallas medianas/pequeñas, no conviene span 2 filas */
@media (max-width: 1200px){
  .ltk-featured__grid > .ltk-featured__item:first-child{
    grid-row: span 1;
  }
}

/* =========================================================
   FIX: Cards generales (osahan-card) — que el precio no se pierda
   ========================================================= */

/* La card completa como columna */
.product-row .osahan-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible; /* evita cortes del precio */
}

/* La imagen no debe empujar el body */
.product-row .osahan-card .card-img-top{
  flex: 0 0 auto;
}

/* El body ocupa el alto disponible */
.product-row .osahan-card .card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Título: máximo 2 líneas */
.product-row .osahan-card .card-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Descripción (si existe): 1 línea máximo */
.product-row .osahan-card .card-text,
.product-row .osahan-card .text-muted{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* Bloque de precios siempre abajo del body */
.product-row .osahan-card .card-body > :last-child{
  margin-top: auto;
}

/* Si tu precio usa clases específicas, fuerza que quede abajo */
.product-row .osahan-card .price,
.product-row .osahan-card .product-price,
.product-row .osahan-card .card-price{
  margin-top: auto;
}

.product-row .osahan-card,
.product-row .osahan-card .card-body{
  height: auto !important;
  overflow: visible !important;
}

/* =========================
   MODAL LOGIN (Mi cuenta)
   Scope: SOLO #login_modal
   ========================= */

#login_modal .ltk-auth-modal{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15,23,42,.18);
  overflow: hidden;
  background: #fff;
}

/* Overlay más “premium” */
#login_modal.modal .modal-dialog{
  max-width: 640px;
  padding: 0 12px;
}

#login_modal.modal .modal-backdrop.show,
.modal-backdrop.show{
  opacity: .45;
}

/* Header */
#login_modal .ltk-auth-modal .modal-header{
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 18px 22px;
  background: #ffffff;
  align-items: center;
}

#login_modal .ltk-auth-modal .modal-title{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.2px;
  color: #0f172a;
  margin: 0;
}

/* Botón cerrar: circular, discreto */
#login_modal .ltk-auth-modal .close{
  opacity: 1;
  width: 38px;
  height: 38px;
  margin: -6px -6px -6px auto;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  display: grid;
  place-items: center;
  text-shadow: none;
}

#login_modal .ltk-auth-modal .close:hover{
  background: rgba(15,23,42,.10);
}

/* Body */
#login_modal .ltk-auth-modal .modal-body{
  padding: 18px 22px 8px;
}

#login_modal .ltk-auth-modal .modal-body .text-info{
  color: #64748b !important;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

/* Inputs: override del template (style.css los deja cuadrados) */
#login_modal .ltk-auth-modal .form-control{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff;
  min-height: 46px;
  font-size: 14px;
  padding: 10px 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

#login_modal .ltk-auth-modal .form-control:focus{
  border-color: rgba(255,106,0,.55) !important;
  box-shadow: 0 10px 28px rgba(255,106,0,.12);
}

/* Footer */
#login_modal .ltk-auth-modal .modal-footer{
  border-top: 0;
  padding: 12px 22px 20px;
  gap: 10px;              /* Bootstrap 4 no siempre aplica gap; igual ayuda */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Botones: forma pill y jerarquía */
#login_modal .ltk-auth-modal .btn{
  border-radius: 999px !important;
  font-weight: 900;
  padding: 10px 16px !important;
  font-size: 14px !important;
}

/* "Ingresar" -> primario (naranja, consistente con el home) */
#login_modal .ltk-auth-modal .btn.btn-primary{
  background: #ff6a00 !important;
  border-color: #ff6a00 !important;
  box-shadow: 0 10px 22px rgba(255,106,0,.22);
}

#login_modal .ltk-auth-modal .btn.btn-primary:hover{
  background: #e85f00 !important;
  border-color: #e85f00 !important;
}

/* "Nuevo Cliente" -> secundario (outline) */
#login_modal .ltk-auth-modal .btn.btn-success{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}

#login_modal .ltk-auth-modal .btn.btn-success:hover{
  border-color: rgba(255,106,0,.55) !important;
  color: #ff6a00 !important;
}

/* "Olvidé mi contraseña" -> neutro/link (sin rojo alarmista) */
#login_modal .ltk-auth-modal .btn.btn-danger{
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #2563eb !important;
  box-shadow: none !important;
  text-decoration: none;
}

#login_modal .ltk-auth-modal .btn.btn-danger:hover{
  background: rgba(37,99,235,.06) !important;
  border-color: rgba(37,99,235,.14) !important;
}

/* Mobile: botones full width y orden lógico */
@media (max-width: 575.98px){
  #login_modal .ltk-auth-modal .modal-footer{
    flex-direction: column;
    align-items: stretch;
  }
  #login_modal .ltk-auth-modal .btn{
    width: 100%;
  }
}

#login_modal.modal .modal-dialog{
  max-width: 580px; /* antes 640 */
}

#login_modal .ltk-auth-modal .form-control{
  border: 1px solid rgba(15,23,42,.16) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.05); /* más suave */
}
#login_modal .ltk-auth-modal .form-control::placeholder{
  color: rgba(15,23,42,.55);
}

#login_modal .ltk-auth-modal .btn.btn-danger{
  padding: 10px 8px !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: underline;
  font-weight: 800;
}
#login_modal .ltk-auth-modal .btn.btn-danger:hover{
  background: transparent !important;
  color: #1d4ed8 !important;
}

#login_modal .ltk-auth-modal .close{
  width: 34px;
  height: 34px;
  margin: -4px -4px -4px auto;
  background: rgba(15,23,42,.05);
}

#login_modal .ltk-auth-modal .modal-footer{
  justify-content: center;   /* en vez de flex-end */
}
#login_modal .ltk-auth-modal .btn.btn-primary{
  margin-left: auto;         /* empuja “Ingresar” a la derecha */
}

/* ===== FIX: X dentro del contenedor ===== */
#login_modal .ltk-auth-modal .modal-header{
  position: relative;                 /* ancla el botón */
}

#login_modal .ltk-auth-modal .close{
  position: absolute;
  top: 14px;                          /* ajusta fino si quieres */
  right: 14px;                        /* ajusta fino si quieres */
  margin: 0 !important;               /* mata los márgenes negativos */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 !important;
}

/* opcional: mejora target + coherencia visual */
#login_modal .ltk-auth-modal .close span{
  display: block;
  line-height: 1;
}

@media (max-width: 575.98px){
  #login_modal .ltk-auth-modal .modal-footer .btn.btn-primary{ order: 1; }
  #login_modal .ltk-auth-modal .modal-footer .btn.btn-danger{ order: 2; }
  #login_modal .ltk-auth-modal .modal-footer .btn.btn-success{ order: 3; }
}

/* Forgot password bajo el input */
#login_modal .ltk-forgot-wrap{
  margin-top: 6px;
  text-align: right;
}

#login_modal .ltk-forgot-link{
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}

#login_modal .ltk-forgot-link:hover{
  text-decoration: underline;
}

/* =========================
   MODAL ALERTA (email_blanco)
   ========================= */
#email_blanco .modal-dialog{
  max-width: 520px;
  padding: 0 12px;
}

/* Ajustes específicos del “alert” */
#email_blanco .ltk-alert-modal .modal-header{
  padding-right: 56px; /* espacio para la X absoluta */
}

/* Título más “UI” y menos “bootstrap default” */
#email_blanco .ltk-alert-modal .modal-title{
  font-weight: 900;
  font-size: 20px;
}

/* Cuerpo más compacto */
#email_blanco .ltk-alert-modal .modal-body{
  padding: 14px 22px 8px;
  color: #0f172a;
  font-size: 14px;
}

/* Footer: CTA simple a la derecha */
#email_blanco .ltk-alert-modal .modal-footer{
  padding: 12px 22px 18px;
  justify-content: flex-end;
}

/* Botón Aceptar con estilo neutro moderno (no gris “duro”) */
#email_blanco .ltk-alert-modal .btn.btn-secondary{
  border-radius: 999px !important;
  font-weight: 900;
  padding: 10px 16px !important;
  font-size: 14px !important;
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}

#email_blanco .ltk-alert-modal .btn.btn-secondary:hover{
  background: rgba(15,23,42,.10) !important;
  border-color: rgba(15,23,42,.14) !important;
}

/* FIX: asegurar que la X quede dentro (igual que login) */
#email_blanco .ltk-alert-modal .modal-header{
  position: relative;
}

#email_blanco .ltk-alert-modal .close{
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0 !important;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.05);
  opacity: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-shadow: none;
}

#email_blanco .ltk-alert-modal .close:hover{
  background: rgba(15,23,42,.10);
}

#email_blanco .ltk-alert-modal .modal-title::before{
  content: "⚠️";
  margin-right: 10px;
}

/* Error inline en modal login */
#login_modal .ltk-inline-error{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;                 /* ámbar */
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 12px;
  padding: 10px 12px;
}

/* =========================
   MODAL ÉXITO / INFO (olvidé contraseña OK)
   ========================= */

#respuesta_cambio_contrasena .modal-dialog{
  max-width: 520px;
  padding: 0 12px;
}

#respuesta_cambio_contrasena .ltk-success-modal .modal-header{
  position: relative;
  padding-right: 56px;
}

#respuesta_cambio_contrasena .ltk-success-modal .modal-title{
  font-weight: 900;
  font-size: 20px;
}

/* Icono suave de confirmación */
#respuesta_cambio_contrasena .ltk-success-modal .modal-title::before{
  content: "📧";
  margin-right: 10px;
}

#respuesta_cambio_contrasena .ltk-success-modal .modal-body{
  font-size: 14px;
  color: #0f172a;
}

#respuesta_cambio_contrasena .ltk-success-modal .modal-footer{
  border-top: 0;
  justify-content: flex-end;
}

/* CTA único */
#respuesta_cambio_contrasena .ltk-success-modal .btn.btn-secondary{
  border-radius: 999px !important;
  font-weight: 900;
  padding: 10px 18px !important;
  background: #ff6a00 !important;
  border-color: #ff6a00 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255,106,0,.22);
}

#respuesta_cambio_contrasena .ltk-success-modal .btn.btn-secondary:hover{
  background: #e85f00 !important;
  border-color: #e85f00 !important;
}

.ltk-success-modal .modal-title::before{
  font-size: 20px;
  opacity: .9;
}

/* Inline error (danger) */
#login_modal .ltk-inline-error--danger{
  color: #b91c1c;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
}

.ltk-action--user {
  gap: 8px;
}

.ltk-action__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.ltk-user-name {
  font-weight: 600;
  font-size: 14px;
  color: #1f2937; /* gris oscuro */
}

.ltk-user-label {
  font-size: 12px;
  color: #6b7280; /* gris secundario */
}