/* ===========================
   Alpaca Cream · style.css
   Ruta: /assets/css/style.css
   =========================== */

/* --------- Variables de tema --------- */
:root{
  /* Colores base */
  --color-bg: #0b0b0b;
  --color-surface: #151515;
  --color-text: #f6f6f6;
  --color-muted: #cfcfcf;
  --color-border: #2a2a2a;

  /* Marca (ajústalos a tu identidad) */
  --brand-1: #ffd166; /* amarillo cálido */
  --brand-2: #06d6a0; /* verde menta */
  --brand-3: #118ab2; /* azul acento */
  --brand-4: #ef476f; /* rosa/acento */

  /* Botones/links */
  --btn-bg: var(--brand-3);
  --btn-text: #fff;
  --btn-bg-hover: #0f7395;

  /* Tipografía y layout */
  --font-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --container: 1200px;
  --gap: 20px;

  /* Header */
  --header-h: 72px;
  --header-bg: rgba(11,11,11,.8);
  --header-blur: saturate(180%) blur(8px);
}

/* --------- Reset/normalización suave --------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-base);
  color: var(--color-text);
  /* ===== Fondo global con imagen ===== */
  /* Ruta relativa correcta desde /assets/css/ hacia /assets/img/: ../img/ */
  /* Fallback: color sólido + imagen + overlay para legibilidad */
  background:
    linear-gradient(rgba(11,11,11,.45), rgba(11,11,11,.45)),
    url("../img/fondo.png") center / cover no-repeat,
    var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Si tu archivo real es PNG, cambia la línea de arriba a url("../img/fondo.png") */

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--brand-3); text-decoration: none; }
a:hover{ text-decoration: underline; }
button{ font-family: inherit; }

/* --------- Contenedor --------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* ======= Barra promocional ======= */
.promo-bar{
  background: linear-gradient(90deg, var(--brand-4), var(--brand-3));
  color: #fff;
  text-align: center;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 14px;
}
.promo-bar p{ margin: 0; }
.promo-links{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.promo-btn{
  background: #fff;
  color: #000;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  display: inline-block;
}
.promo-btn:hover{ filter: brightness(0.9); }
.promo-note{ opacity: .9; font-size: 12px; }

/* ======= Header sticky ======= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: var(--header-blur);
  background: var(--header-bg);
  border-bottom: 1px solid var(--color-border);
}
.header-inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.logo img{
  width: 64px; height: 64px;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

/* Acciones rápidas (carrito / cuenta / redes) */
.quick-actions{
  display: none;
  gap: 14px;
  align-items: center;
}
.quick-actions .action-link{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.quick-actions .action-link:hover{
  background: #1c1c1c;
}

/* ======= Menú principal ======= */
.primary-nav{
  border-top: 1px solid var(--color-border);
  background: #0f0f0f;
}
.primary-nav ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 10px;
  justify-content: center; align-items: center;
  min-height: 48px;
}
.primary-nav a{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--color-text);
  font-weight: 600;
}
.primary-nav a:hover{
  background: var(--color-surface);
  text-decoration: none;
}

/* ======= Hamburguesa ======= */
.hamburger{
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  align-items: center; justify-content: center;
}
.hamburger span{
  width: 20px; height: 2px; background: var(--color-text);
  position: relative; display: block;
}
.hamburger span::before,
.hamburger span::after{
  content:""; position: absolute; left:0; right:0; height:2px; background: var(--color-text);
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

/* ======= Botones genéricos ======= */
/* ======= Botones genéricos unificados ======= */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  background: linear-gradient(90deg, #00ffb3, #4dd4ff);
  color: #001014 !important;
  border: none;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(0,255,179,0.18);
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 18px rgba(0,255,179,0.28); text-decoration: none; }
.btn:active{ transform: translateY(0); }
.btn:disabled, .btn[disabled]{ opacity: .5; cursor: not-allowed; transform: none !important; }

.btn-primary{
  background: linear-gradient(90deg, #00ffb3, #4dd4ff);
  color: #001014 !important;
}

.btn-outline{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255,255,255,.04);
  color: #e8eef5 !important;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s ease;
  line-height: 1.2;
}
.btn-outline:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff !important; transform: translateY(-1px); }
.btn-outline:active{ transform: translateY(0); }

.btn-outline.danger, .btn-danger{
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.08);
}
.btn-outline.danger:hover, .btn-danger:hover{
  background: #ef4444;
  border-color: #ef4444;
  color: #fff !important;
}

.btn-outline.warn, .btn-warn{
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.08);
}
.btn-outline.warn:hover, .btn-warn:hover{
  background: #f59e0b;
  border-color: #f59e0b;
  color: #001014 !important;
}

.btn-sm, .btn.small, .btn-outline.small{
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 10px;
}

/* ======= Tarjetas / bloques ======= */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-body{ padding: 18px; }
.card-title{ margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.card-text{ margin: 0; color: var(--color-muted); }

/* ======= Rejillas ======= */
.grid{
  display: grid;
  gap: var(--gap);
}
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* ======= Formularios ======= */
input, select, textarea{
  width: 100%;
  padding: 12px 14px;
  background: #121212;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
label{ display:block; margin-bottom: 6px; font-weight: 600; }
input:focus, select:focus, textarea:focus{
  outline: 2px solid var(--brand-3);
  border-color: transparent;
}

/* ======= Utilidades ======= */
.mt-0{ margin-top:0!important; } .mt-1{ margin-top:8px!important; } .mt-2{ margin-top:14px!important; } .mt-3{ margin-top:22px!important; }
.mb-0{ margin-bottom:0!important; } .mb-1{ margin-bottom:8px!important; } .mb-2{ margin-bottom:14px!important; } .mb-3{ margin-bottom:22px!important; }
.text-center{ text-align:center!important; }
.hide{ display:none!important; }

/* ======= Footer (cuando lo añadas) ======= */
.site-footer{
  margin-top: 40px;
  border-top: 1px solid var(--color-border);
  background: #0f0f0f;
  padding: 30px 0;
  color: var(--color-muted);
  font-size: 14px;
}

/* ======= Responsive ======= */
@media (min-width: 768px){
  .quick-actions{ display: inline-flex; }
  .hamburger{ display: none; }
}

@media (max-width: 767px){
  /* Menú móvil desplegable */
  .primary-nav{
    position: fixed;
    top: calc(var(--header-h) + 40px); /* debajo del header y la promo */
    left: 0; right: 0;
    transform: translateY(-20px);
    opacity: 0; pointer-events: none;
    transition: .2s ease;
    border-top: none;
    background: #0f0f0f;
    padding: 8px 0 12px;
  }
  .primary-nav.open{
    transform: translateY(0);
    opacity: 1; pointer-events: auto;
  }
  .primary-nav ul{
    flex-direction: column;
    gap: 4px;
    min-height: auto;
  }
  .logo img{ width:56px; height:56px; }
}
/* ===== Footer layout refinado ===== */
.footer-grid{
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.footer-col img{ border-radius: 12px; }

.footer-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
}
.footer-links{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.footer-links a{
  color: var(--color-muted);
  text-decoration: none;
}
.footer-links a:hover{ color: var(--color-text); text-decoration: underline; }

.footer-thumb img{
  width: 120px; height: auto;
  box-shadow: var(--shadow);
}

/* Responsive columnas del footer */
@media (min-width: 600px){
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 992px){
  .footer-grid{ grid-template-columns: repeat(4,1fr); }
}
/* --- FOOTER --- */
.site-footer {
  position: relative;
  background: radial-gradient(circle at center, #0a0014 0%, #050009 100%);
  color: #fff;
  text-align: center;
  padding: 4rem 1rem 2rem;
  overflow: hidden;
}

.footer-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://alpacacream.com/wp-content/uploads/2025/08/efecto-bokeh.jpg') center/cover no-repeat;
  opacity: 0.25;
  z-index: 0;
}

.footer-center {
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

.footer-quote {
  width: 130px;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.footer-text {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #f5e5ff;
  margin: 0.5rem 0;
  letter-spacing: 1px;
}

.footer-subtext {
  color: #aaa;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.footer-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(95%, 600px);
}

.logo-footer {
  height: 70px;
  opacity: 0.9;
}

.logo-footer.right {
  height: 80px;
  filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.6));
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.footer-links a {
  color: #dcd0ff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .footer-logos {
    flex-direction: column;
    gap: 0.8rem;
  }
  .footer-text {
    font-size: 1.1rem;
  }
}
/* ===== FOOTER ===== */
.site-footer {
  position: relative;
  background: radial-gradient(circle at center, #0c0014 0%, #090012 100%);
  color: #fff;
  text-align: center;
  padding: 2rem 1rem 1rem;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://alpacacream.com/wp-content/uploads/2025/08/efecto-bokeh.jpg') center/cover no-repeat;
  opacity: 0.25;
  z-index: 0;
}

.footer-back {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
}

.footer-center {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem auto 3rem;
  width: 100%;
}

.footer-future-img {
  width: 140px;
  max-width: 35vw;
  opacity: 0.9;
  margin: 0 auto 0.8rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: block;
}

.footer-future-img:hover {
  transform: scale(1.05);
  opacity: 1;
}


.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  justify-items: center;
  align-items: start;
  margin-bottom: 2rem;
}

.footer-col {
  text-align: center;
}

.footer-logo img,
.footer-logo-yz img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
  opacity: 0.9;
}

.footer-title {
  color: #c8b8ff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 0.4rem 0;
}

.footer-links a {
  color: #e0d4ff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  opacity: 0.8;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Responsivo */
@media (max-width: 600px) {
  .footer-future-img {
    width: 110px;             /* más pequeño en móvil */
    max-width: 60vw;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
  }

  .footer-title {
    font-size: 1rem;
  }
}
/* --- Forzar footer transparente para que se vea el fondo global --- */
.site-footer { 
  background: transparent !important;
}

/* Si en tu CSS hay un overlay en el footer, lo desactivamos */
.site-footer::before {
  content: none !important;
  display: none !important;
}

/* Por si quedó algún fondo en contenedores internos del footer */
.footer-back,
.footer-center,
.footer-grid {
  background: transparent !important;
}
/* Rejilla más flexible al añadir productos por AJAX */
#productGrid {
  display: grid;                      /* ya lo tienes, lo reafirmamos */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;                          /* mismo gap que usas */
}

/* En móvil mantenemos 2 columnas como tenías */
@media (max-width: 768px){
  #productGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* === HOTFIX: que el fondo llegue hasta el final y no aparezca negro al cargar más === */
html, body { height: auto !important; }      /* anula el height:100% anterior */
html { min-height: 100%; }

/* Pintamos el fondo en el <html> para que siempre esté detrás, incluso si el <body> no crece */
html{
  background:
    linear-gradient(rgba(11,11,11,.45), rgba(11,11,11,.45)),
    url("/assets/img/fondo.png") center / cover no-repeat fixed,
    #0b0b0b !important; /* si es JPG, cambia a fondo.jpg */
}

/* Y dejamos el body transparente para no tapar el fondo del <html> */
body{ background: transparent !important; }

/* === HOTFIX footer: transparente y sin overlay === */
.site-footer { background: transparent !important; }
.site-footer::before { content: none !important; display: none !important; }
.footer-back, .footer-center, .footer-grid { background: transparent !important; }
/* === Restaurar fondo global en <body> y que llegue hasta abajo === */

/* 1) No limites la altura del documento */
html, body { height: auto !important; }   /* anula el height:100% anterior */
html { min-height: 100%; background: #0b0b0b; }  /* color de respaldo */

/* 2) Fondo en el BODY (imagen + overlay) */
body{
  background:
    linear-gradient(rgba(11,11,11,.45), rgba(11,11,11,.45)),
    url("/assets/img/fondo.png") center / cover no-repeat,
    transparent !important;        /* color debajo de la imagen */
  min-height: 100vh;               /* asegura cubrir pantalla */
}

/* 3) Footer transparente para que no tape el fondo */
.site-footer { background: transparent !important; }
.site-footer::before { content: none !important; display: none !important; }

/* (por si algún bloque interno del footer tenía fondo) */
.footer-back, .footer-center, .footer-grid { background: transparent !important; }
/* === Fondo global (ruta RELATIVA, funciona en /dev) === */
body{
  background:
    linear-gradient(rgba(11,11,11,.45), rgba(11,11,11,.45)),
    url("../img/fondo.png") center / cover no-repeat,
    #0b0b0b !important;   /* si es JPG: ../img/fondo.jpg */
  min-height: 100vh;
}

/* === Footer: que no tape el fondo === */
.site-footer{ background: transparent !important; }
.site-footer::before{ content: none !important; display: none !important; }
/* ==== FIX: fondo que NO se estira al cargar "Ver más" ==== */
/* 1) Dejamos html/body sin fondo directo para evitar propagaciones raras */
html, body { background: transparent !important; }

/* 2) Pintamos el fondo en una capa fija detrás de todo el contenido */
body::before{
  content:"";
  position: fixed;
  inset: 0;                 /* ocupa siempre toda la ventana */
  z-index: -1;              /* detrás de todo */
  pointer-events: none;     /* no tapa clics */
  background:
    linear-gradient(rgba(11,11,11,.45), rgba(11,11,11,.45)),
    url("../img/fondo.png") center / cover no-repeat,
    #0b0b0b;
  /* si tu imagen es JPG, cambia la ruta a ../img/fondo.jpg */
}
/* ======= MOBILE DRAWER (única fuente de verdad) ======= */
.mobile-drawer{
  position: fixed;
  inset: 0;
  display: none;                 /* cerrado por defecto */
  z-index: 2000;                 /* por encima del header */
}
.mobile-drawer.open{ display: block !important; }

/* Backdrop siempre detrás del panel */
.mobile-drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 0;
}

/* Panel: inicialmente fuera de pantalla; entra con .open */
.mobile-drawer__panel{
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 85%; max-width: 360px;
  background: #0d1b22;
  border-left: 1px solid rgba(255,255,255,.12);
  padding: 14px 14px 24px;
  overflow: auto;
  transform: translateX(100%);     /* oculto */
  transition: transform .25s ease; /* animación */
  z-index: 1;                      /* por encima del backdrop */
}
.mobile-drawer.open .mobile-drawer__panel{
  transform: translateX(0);        /* visible */
}

/* Header del panel y botón cerrar */
.mobile-drawer__header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.mobile-drawer__header button{
  background:none; border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:8px; padding:6px 10px; cursor:pointer;
}

/* Contenido del drawer (mejor contraste) */
.mobile-block{ margin:14px 0; }
.mobile-block__title{ font-weight:800; color:#f1f4ff; margin-bottom:6px; }
.mobile-list{ list-style:none; margin:0; padding:0; }
.mobile-list li a{
  display:block; padding:10px 8px; border-radius:10px;
  color:#f7f9ff; text-decoration:none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
}
.mobile-list li a:hover{ background: rgba(255,255,255,.08); }

/* Evitar scroll del body cuando el drawer está abierto */
body.no-scroll{ overflow:hidden; }

/* Asegurar clicabilidad de la hamburguesa */
.hamburger{ z-index: 2100; }

/* En móvil NO usamos el viejo sistema de primary-nav abierto */
@media (max-width: 767px){
  .primary-nav{ display: none !important; }
}

.mt-10 {
  color: #2E1B0E; /* Marrón oscuro */
}
.texto-sistema {
  opacity: 0.75;
  margin-top: -6px;
  color: #2E1B0E; /* Marrón muy oscuro */
  font-size: 14px; /* Opcional, si quieres unificar tamaño */
  line-height: 1.4; /* Mejora la legibilidad */
}
.titulo-principal {
  color: #2E1B0E;
  font-weight: bold;
  font-size: 24px; /* Ajusta según tu diseño */
}
.btn-outline-fixed {
  background-color: #000;       /* fondo negro */
  color: #fff;                  /* texto blanco */
  border: 1px solid #000;       /* borde negro */
  border-radius: 0.25rem;       /* igual que Bootstrap */
  padding: 0.375rem 0.75rem;    /* igual que Bootstrap */
  font-size: 1rem;
  line-height: 1.5;
  transition: background-color 0.15s ease-in-out;
}
.btn-outline-fixed:hover {
  background-color: #000;
  color: #fff;
}
html, body { height:auto; }
body { overflow:auto; -webkit-overflow-scrolling:touch; }

/* ===== Botones unificados para el panel admin ===== */
.btn, a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:12px; font-weight:800; font-size:14px;
  cursor:pointer; transition:transform .06s ease, filter .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none !important; line-height:1.2;
}

/* Primario por defecto (fondo degradado turquesa) */
.btn:not(.ghost):not(.btn-outline):not(.secondary):not(.btn-secondary):not(.danger):not(.btn-del):not(.btn-dark):not(#loadMore):not(.btn-outline-fixed),
a.btn:not(.ghost):not(.btn-outline):not(.secondary):not(.btn-secondary):not(.danger):not(.btn-del):not(.btn-dark):not(#loadMore):not(.btn-outline-fixed),
button.btn:not(.ghost):not(.btn-outline):not(.secondary):not(.btn-secondary):not(.danger):not(.btn-del):not(.btn-dark):not(#loadMore):not(.btn-outline-fixed),
.btn.primary, .btn-primary, button.btn.primary{
  background:linear-gradient(90deg, #00ffb3, #4dd4ff) !important;
  border:none !important; color:#001014 !important;
  box-shadow:0 4px 14px rgba(0,255,179,0.22);
}
.btn.primary:hover, .btn-primary:hover, button.btn.primary:hover,
.btn:not(.ghost):not(.btn-outline):not(.secondary):not(.btn-secondary):not(.danger):not(.btn-del):not(.btn-dark):not(#loadMore):not(.btn-outline-fixed):hover{
  background:linear-gradient(90deg, #00ffb3, #4dd4ff) !important;
  transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 6px 18px rgba(0,255,179,0.32); color:#001014 !important; text-decoration:none !important;
}
.btn.primary:active, .btn-primary:active, button.btn.primary:active,
.btn:not(.ghost):not(.btn-outline):not(.secondary):not(.btn-secondary):not(.danger):not(.btn-del):not(.btn-dark):not(#loadMore):not(.btn-outline-fixed):active{
  transform:translateY(0);
}

/* Botón Ver más del index: fondo negro, texto blanco y borde verde */
#loadMore, button#loadMore, .btn#loadMore{
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #00ffb3 !important;
  border-radius: 12px !important;
  padding: 12px 32px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0,255,179,0.15) !important;
  transition: all .2s ease !important;
}
#loadMore:hover, button#loadMore:hover, .btn#loadMore:hover{
  background: #0d1217 !important;
  color: #ffffff !important;
  border-color: #00ffb3 !important;
  box-shadow: 0 6px 22px rgba(0,255,179,0.35) !important;
  transform: translateY(-2px) !important;
}
#loadMore:active, button#loadMore:active, .btn#loadMore:active{
  transform: translateY(0) !important;
}

/* Secundarios, Ghost, Outline y Dark */
.btn.ghost, .btn-outline, a.btn-outline, .btn-secondary, .btn.secondary, .btn.btn-dark, .btn-dark{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#f1f5f9 !important;
  border-radius:12px; padding:9px 16px; font-size:14px; font-weight:700;
  cursor:pointer; transition:all .15s ease; box-shadow:none !important;
  line-height:1.2; text-decoration:none !important;
}
.btn.ghost:hover, .btn-outline:hover, a.btn-outline:hover, .btn-secondary:hover, .btn.secondary:hover, .btn.btn-dark:hover, .btn-dark:hover{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(0,255,179,.45) !important;
  color:#ffffff !important;
  transform:translateY(-1px);
}
.btn.ghost:active, .btn-outline:active, a.btn-outline:active, .btn-secondary:active, .btn.secondary:active{ transform:translateY(0); }

.btn.danger, .btn-outline.danger, a.btn-outline.danger, .btn.btn-del{
  background:rgba(239,68,68,.12) !important;
  border:1px solid rgba(239,68,68,.35) !important;
  color:#fca5a5 !important;
  box-shadow:none !important;
}
.btn.danger:hover, .btn-outline.danger:hover, a.btn-outline.danger:hover, .btn.btn-del:hover{
  background:#ef4444 !important;
  border-color:#ef4444 !important;
  color:#ffffff !important;
}
.btn.small, .btn-outline.small, .btn-sm{ padding:6px 12px; font-size:13px; border-radius:10px; }