/* ══════════════════════════════════════════════════════════════════════
   SLIDER MONUMENTOS LEONESES — blindado con !important
   ══════════════════════════════════════════════════════════════════════ */
.hero, .hero-ofertas, .hero-tiendas, .hero-section {
  position: relative !important;
  overflow: hidden !important;
  min-height: 440px !important;
}
.hero::before,
.hero-ofertas::before,
.hero-tiendas::before,
.hero-section::before {
  z-index: 0 !important;
}
.hero > *:not(.hs-root),
.hero-ofertas > *:not(.hs-root),
.hero-tiendas > *:not(.hs-root),
.hero-section > *:not(.hs-root) {
  position: relative !important;
  z-index: 10 !important;
}
.hs-root {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.hs-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 0 !important;
  transition: opacity 1.4s ease-in-out !important;
  transform: scale(1.06);
  z-index: 1 !important;
}
.hs-slide.is-active {
  opacity: 1 !important;
  z-index: 2 !important;
  animation: hs-kb 9s ease-out forwards;
}
@keyframes hs-kb {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}
.hs-overlay {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: rgba(10, 5, 15, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
[data-theme="light"] .hs-overlay {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.hs-caption {
  position: absolute !important;
  bottom: 2.8rem !important;
  left: 2.2rem !important;
  right: 6rem !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .35rem !important;
  pointer-events: none !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.85) !important;
  animation: hs-fi .9s ease both;
}
@keyframes hs-fi {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
.hs-caption-tag {
  display: inline-block !important;
  width: fit-content !important;
  background: rgba(145, 16, 72, 0.85) !important;
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .22rem .8rem !important;
  border-radius: 20px !important;
  margin-bottom: .1rem !important;
}
.hs-caption-title {
  display: block !important;
  font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}
.hs-caption-sub {
  display: block !important;
  font-size: .9rem !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 400 !important;
}
.hs-dots {
  position: absolute !important;
  bottom: 1rem !important;
  right: 1.5rem !important;
  display: flex !important;
  gap: .45rem !important;
  z-index: 4 !important;
  pointer-events: auto !important;
}
.hs-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all .3s !important;
}
.hs-dot.is-active {
  background: #fff !important;
  width: 24px !important;
  border-radius: 4px !important;
}
@media(max-width:600px) {
  .hero, .hero-ofertas, .hero-tiendas, .hero-section { min-height: 320px !important; }
  .hs-caption { bottom:1.2rem; left:1rem; right:4rem; }
  .hs-caption-sub { display:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BOTÓN VER OFERTA — Rediseño horizontal, sin gradiente, texto grande
   ══════════════════════════════════════════════════════════════════════ */

/* Footer de la card: precio izquierda, botón derecha en fila */
.pcard-footer {
  padding: .85rem 1rem !important;
  border-top: 1px solid rgba(145,16,72,.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
}
/* Precio dentro del footer para la vista horizontal */
.pcard-footer-price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.pcard-footer-price .fp-orig {
  font-size: .78rem;
  color: var(--text3, #6b7280);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.pcard-footer-price .fp-now {
  font-size: 1.9rem !important;
  font-weight: 900 !important;
  color: #c01255 !important;
  letter-spacing: -.03em !important;
}

/* Botón VER OFERTA — flat, sólido, sin gradiente, texto grande */
.btn-ver {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  min-width: 120px !important;
  padding: .62rem 1.3rem !important;
  background: #911048 !important;
  color: #fff !important;
  font-size: .97rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Quitar el ::after arrow de IA */
.btn-ver::after { content: '' !important; display: none !important; }
.btn-ver:hover {
  background: #c01255 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(145,16,72,.38) !important;
  color: #fff !important;
}
.btn-ver.disabled {
  background: #374151 !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Quitar estilos de precio del pcard-body cuando están en el footer */
.pcard-body .pcard-prices { display: none !important; }
.pcard-body .price-savings { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   BADGES — Disponible con fondo sólido visible
   ══════════════════════════════════════════════════════════════════════ */
.badge-disponible {
  background: #059669 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(5,150,105,.4) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   LIMPIAR EMOJIS DE IA de los botones de tienda
   ══════════════════════════════════════════════════════════════════════ */

/* Quitar icono SVG de flecha del botón Ver tienda */
.scard-btn-main svg { display: none !important; }
.scard-btn-main {
  background: #911048 !important;
  color: #fff !important;
  font-size: .97rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background .18s, transform .18s, box-shadow .18s !important;
}
.scard-btn-main::before { display: none !important; }
.scard-btn-main:hover {
  background: #c01255 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(145,16,72,.38) !important;
  color: #fff !important;
}

/* Iconos botón-icono de tienda: sin emoji en el HTML, solo SVG inline */
.scard-btn-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PRECIO GRANDE — en pcard-body sigue visible para normal/grande
   ══════════════════════════════════════════════════════════════════════ */
/* Para tarjetas GRANDE el precio se queda en el body */
.pcard[data-tamano="grande"] .pcard-body .pcard-prices { display: flex !important; }
.pcard[data-tamano="grande"] .pcard-body .price-savings { display: flex !important; }
/* En grande el footer muestra solo botón, sin precio repetido */
.pcard[data-tamano="grande"] .pcard-footer-price { display: none !important; }
.pcard[data-tamano="grande"] .btn-ver { flex: 1 !important; min-width: unset !important; }

/* ══════════════════════════════════════════════════════════════════════
   PRECIO EN EL FOOTER (tarjetas normal y pequeño)
   ══════════════════════════════════════════════════════════════════════ */
.pcard[data-tamano="normal"] .pcard-footer-price,
.pcard[data-tamano="pequeno"] .pcard-footer-price { display: flex !important; }

/* Ajuste mobile — footer sigue horizontal */
@media(max-width:480px) {
  .pcard-footer { flex-wrap: nowrap !important; gap: .5rem !important; }
  .btn-ver { min-width: 100px !important; font-size: .88rem !important; padding: .58rem 1rem !important; }
  .pcard-footer-price .fp-now { font-size: 1.5rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   FIX CRÍTICO: Tarjeta GRANDE — botón horizontal, NO columna vertical
   Estructura: grid 2 cols → foto ocupa ambas filas, info+footer apilados
   ══════════════════════════════════════════════════════════════════════ */

/* Cambiar de flex a grid para controlar exactamente dónde va el footer */
.pcard[data-tamano="grande"] {
  display: grid !important;
  grid-template-columns: 55% 1fr !important;
  grid-template-rows: 1fr auto !important;
  flex-direction: unset !important;
}
.pcard[data-tamano="grande"] .pcard-photo {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;   /* foto ocupa toda la altura */
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
}
.pcard[data-tamano="grande"] .pcard-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 1.4rem 1.5rem .75rem !important;
  justify-content: flex-start !important;
}
.pcard[data-tamano="grande"] .pcard-footer {
  grid-column: 2 !important;
  grid-row: 2 !important;
  flex-direction: row !important;      /* HORIZONTAL: precio izq, botón der */
  align-items: center !important;
  justify-content: space-between !important;
  padding: .9rem 1.5rem 1.1rem !important;
  border-top: 1px solid rgba(145,16,72,.1) !important;
}

/* Para grande: precio en el footer (ocultar del body para evitar duplicado) */
.pcard[data-tamano="grande"] .pcard-body .pcard-prices { display: none !important; }
.pcard[data-tamano="grande"] .pcard-body .price-savings { display: none !important; }
.pcard[data-tamano="grande"] .pcard-footer-price { display: flex !important; }
.pcard[data-tamano="grande"] .pcard-footer-price .fp-now {
  font-size: 2.3rem !important;
}

/* Botón en grande: no full-height, tamaño normal */
.pcard[data-tamano="grande"] .btn-ver {
  flex: 0 0 auto !important;
  align-self: center !important;
  min-width: 130px !important;
  padding: .7rem 1.5rem !important;
  font-size: 1rem !important;
}

/* Tarjetas normal y pequeño: footer horizontal (precio izq, botón der) */
.pcard[data-tamano="normal"] .pcard-footer,
.pcard[data-tamano="pequeno"] .pcard-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
}
.pcard[data-tamano="normal"] .pcard-footer-price,
.pcard[data-tamano="pequeno"] .pcard-footer-price {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}
.pcard[data-tamano="normal"] .btn-ver,
.pcard[data-tamano="pequeno"] .btn-ver {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════════
   INPUT BUSCADOR — sin cuadrado blanco, esquinas redondeadas
   ══════════════════════════════════════════════════════════════════════ */

/* Contenedor pill del buscador */
.search-bar,
.offers-search-wrap {
  border-radius: 50px !important;
  overflow: hidden !important;
}

/* El input dentro del buscador: transparente, esquinas heredadas */
.search-bar input,
.offers-search-wrap input,
.hero input[type="text"],
.hero-ofertas input[type="text"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  color: #fff !important;
  font-family: inherit !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: .4rem 0 !important;
}
.search-bar input::placeholder,
.offers-search-wrap input::placeholder {
  color: rgba(255,255,255,.6) !important;
}

/* En modo claro: texto oscuro */
[data-theme="light"] .search-bar input,
[data-theme="light"] .offers-search-wrap input {
  color: #1a0010 !important;
}
[data-theme="light"] .search-bar input::placeholder,
[data-theme="light"] .offers-search-wrap input::placeholder {
  color: rgba(50,0,20,.4) !important;
}

/* Override del fondo blanco que pone el navegador en inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
[data-theme="light"] input:-webkit-autofill {
  -webkit-text-fill-color: #1a0010 !important;
}

/* ======================================================================
   HERO TEXT & ELEMENT VISIBILITY OVER DARK SLIDER BACKGROUND
   ====================================================================== */

.hero h1, 
.hero p, 
.hero-ofertas h1, 
.hero-ofertas p,
.hero-lion,
.hero-tag, 
.hero-tag-leon,
.hero-stat strong, 
.hero-stat span,
.stat-pill, 
.hero-offers-stats,
.precios-hero h1,
.precios-hero p,
.precios-hero h1 em,
.hero-badge,
.hero-badge strong {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Excepciones de colores brillantes */
.hero h1 .gold, 
.hero-ofertas h1 .red, 
.precios-hero h1 em {
  color: #f06080 !important;
  -webkit-text-fill-color: #f06080 !important;
  background: none !important;
}

.hero-tag, .hero-tag-leon {
  background: rgba(145, 16, 72, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Contenedores de buscador en el hero: fondo transparente premium con borde */
.search-bar, 
.offers-search-wrap {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.search-bar:focus-within, 
.offers-search-wrap:focus-within {
  border-color: #c01255 !important;
  box-shadow: 0 0 12px rgba(192, 18, 85, 0.5) !important;
}

/* Botones del buscador en el hero: flat sin gradientes */
.search-bar button, 
#hero-search-btn, 
.offers-search-wrap button, 
#ohero-btn {
  background: #911048 !important;
  background-color: #911048 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(145, 16, 72, 0.35) !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.search-bar button:hover, 
#hero-search-btn:hover, 
.offers-search-wrap button:hover, 
#ohero-btn:hover {
  background: #c01255 !important;
  background-color: #c01255 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(192, 18, 85, 0.5) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DISEÑO DEL NAVBAR Y LOGO (MÁS LLAMATIVO Y GRANDE)
   ══════════════════════════════════════════════════════════════════════ */

/* Logo principal de LeonOfertas */
.navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.6rem !important; /* Más grande */
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  text-decoration: none !important;
  transition: transform .2s ease !important;
}
.navbar-brand:hover {
  transform: scale(1.03) !important;
}
.navbar-brand span:first-child {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  margin-right: 2px !important;
}
.navbar-brand span:last-child {
  background: linear-gradient(135deg, #c01255, #ff4d8d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Asegurar que en pantallas grandes (Escritorio > 900px) NO se vea la X ni el título móvil */
@media (min-width: 901px) {
  .nav-mobile-header,
  .nav-mobile-title,
  .nav-close,
  .nav-sep {
    display: none !important;
  }
}

/* Ajustes de espaciados de los enlaces del menú en Desktop */
@media (min-width: 901px) {
  .navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
  }
  .navbar-nav a {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: .4rem .8rem !important;
    color: #a0aec0 !important;
    transition: color .2s ease !important;
  }
  .navbar-nav a:hover,
  .navbar-nav a.active {
    color: #fff !important;
    background: transparent !important;
  }
  .navbar-nav a.active {
    border-bottom: 2px solid #c01255 !important;
    border-radius: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   DISEÑO GRÁFICO DEL LOGO CON EMBLEMA (SHIELD/ESCUDO LEO)
   ══════════════════════════════════════════════════════════════════════ */
.navbar-brand::before {
  content: '🦁' !important;
  display: inline-block !important;
  font-size: 2.1rem !important;
  margin-right: 12px !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)) !important;
  vertical-align: middle !important;
}

[data-theme='light'] .navbar-brand::before {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25)) !important;
}

/* Adaptación del logo en Modo Día (Light Mode) */
[data-theme='light'] .navbar-brand span:first-child {
  color: #1a1035 !important;
  -webkit-text-fill-color: #1a1035 !important;
}

[data-theme='light'] .navbar-nav a {
  color: #4a3f6b !important;
}
[data-theme='light'] .navbar-nav a:hover,
[data-theme='light'] .navbar-nav a.active {
  color: #911048 !important;
}



/* Contraste y textos del Hero en Modo Claro (Día) */
[data-theme='light'] .hero h1, 
[data-theme='light'] .hero p, 
[data-theme='light'] .hero-ofertas h1, 
[data-theme='light'] .hero-ofertas p,
[data-theme='light'] .hero-lion,
[data-theme='light'] .hero-tag, 
[data-theme='light'] .hero-tag-leon,
[data-theme='light'] .hero-stat strong, 
[data-theme='light'] .hero-stat span,
[data-theme='light'] .stat-pill, 
[data-theme='light'] .hero-offers-stats,
[data-theme='light'] .precios-hero h1,
[data-theme='light'] .precios-hero p,
[data-theme='light'] .precios-hero h1 em,
[data-theme='light'] .hero-badge,
[data-theme='light'] .hero-badge strong {
  color: #1a1035 !important;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8), 0 2px 12px rgba(255, 255, 255, 0.9) !important;
}
[data-theme='light'] .hero-tag, 
[data-theme='light'] .hero-tag-leon {
  background: rgba(145, 16, 72, 0.1) !important;
  border: 1.5px solid rgba(145, 16, 72, 0.4) !important;
  color: #911048 !important;
}
[data-theme='light'] .search-bar, 
[data-theme='light'] .offers-search-wrap {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1.5px solid rgba(145, 16, 72, 0.3) !important;
}