/* ===============================================
   SISTEMA DE BOTONES TUX UNIVERSE (GLASS TECH)
   =============================================== */

/* Base común */
.btn-tux-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;       /* Ajustado para que respire por los lados */
  min-width: 120px;
  height: 40px;          /* <--- AQUÍ ESTÁ TU ALTURA DE 40PX EXACTOS */
  border-radius: 8px;
  border: 2px solid transparent;
  background: #ffffff; 
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  color: hsl(19, 100%, 50%) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  transition: 
    border 0.3s ease, 
    color 0.3s ease, 
    background 0.3s ease, 
    box-shadow 0.3s ease, 
    filter 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  gap: 8px;
  text-transform: none; 
}

/* Efecto brillo metálico */
.btn-tux-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg, 
    transparent,
    rgba(200, 200, 200, 0.25),
    rgba(255, 255, 255, 0.4),
    rgba(200, 200, 200, 0.25),
    transparent
  );
  transform: skewX(-25deg);
  transition: left 0.8s ease;
}

.btn-tux-base:hover::after {
  left: 150%;
}

/* Hover general: más intensidad, menos blur */
.btn-tux-base:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.55); /* misma posición, menos blur, más opacidad */
  filter: brightness(1.03);
}

/* VARIANTE 1: DARK (naranja sólido, sombra negra normal y naranja al hover) */
.btn-glass-dark {
  background: hsl(19, 100%, 50%);
  color: #ffffff !important;
  border: 2px solid transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); /* sombra negra igual que la base */
}

.btn-glass-dark:hover {
  background: hsl(19, 100%, 47%);
  box-shadow: 0 4px 6px rgba(255, 87, 34, 0.75); /* sombra naranja más intensa, menos blur */
}

/* VARIANTE 2: LIGHT (blanco sólido, texto negro, borde negro al hover) */
.btn-glass-light {
  background: #ffffff;
  color: #1a1a1a !important;
  border: 2px solid transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.btn-glass-light:hover {
  border: 1px solid #000000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.45); /* más intensa pero no más grande */
}

/* ==========================================================================
BOTONES GRANDES CONTENEDOR HORIZONTAL
========================================================================== */

.tux-container {
  display: flex;
  align-items: center;
}

/* BOTÓN CLARO */
.tux-universe {
  width: 140px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  box-shadow: 0 4px 6px rgba(34, 34, 34, 0.6);   /* abajo */

  background: radial-gradient(circle, #e8e8e8 0%, #adadad 100%);
  
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;

  transition: all 0.3s ease;
}

/* BOTÓN OSCURO */
.tux-labs {
  width: 140px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 4px 6px rgba(127, 127, 127, 0.6);   /* abajo */

  background: radial-gradient(circle, #235a90 0%, #081f51 100%);
  
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;

  transition: all 0.3s ease;
}

/* DIVISOR CENTRAL */
.divider {
  width: 2px;
  height: 120px;
  background: rgba(0, 0, 0, 0.2);
}

/* HOVER (para que tenga vida) */
.tux-universe:hover {
  filter: brightness(1.05);
  box-shadow: -6px 0 6px rgba(255, 87, 34, 0.75),  /* izquierda */
              0 -4px 6px rgba(255, 87, 34, 0.6),  /* arriba */
              0 4px 6px rgba(255, 87, 34, 0.6);   /* abajo */
}

.tux-labs:hover {
  filter: brightness(1.1);
  box-shadow: 6px 0 6px rgba(255, 87, 34, 0.75),   /* derecha */
              0 -4px 6px rgba(255, 87, 34, 0.6),  /* arriba */
              0 4px 6px rgba(255, 87, 34, 0.6);   /* abajo */
}

.tux-universe img {
  max-height: 67px;
  object-fit: contain;
  pointer-events: none; /* evita problemas al hacer hover */
}
.tux-labs img {
  max-height: 80%;
  object-fit: contain;
  pointer-events: none; /* evita problemas al hacer hover */
}