/* be-premium.css (2026-11-10) - retoques visuales aditivos sobre la tienda (sin tocar el JS compilado). Sin capa @layer: gana a las utilidades de Tailwind. */

/* Tipografia: titulares equilibrados y parrafos sin viudas */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
html { scroll-padding-top: 150px; }

/* Cabecera: fila de navegacion en cristal esmerilado con sombra fina */
header.sticky { box-shadow: 0 1px 0 rgba(15, 23, 42, .05), 0 12px 28px -20px rgba(15, 23, 42, .28); }
header.sticky > div.border-b.bg-white {
  background-color: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}

/* Cinta de servicios: de rayas diagonales a degradado sobrio con brillo lento */
.tape-stripes {
  background-image: linear-gradient(100deg, #0b1a4d 0%, #1e40af 38%, #2563eb 52%, #1e40af 66%, #0b1a4d 100%) !important;
  background-size: 220% 100%;
  animation: be-sheen 18s ease-in-out infinite alternate;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .18) !important;
}
@keyframes be-sheen { to { background-position: 100% 0; } }

/* Boton principal del hero: degradado y destello al pasar el raton */
.be-hero-cta {
  background-image: linear-gradient(135deg, #3b82f6 0%, #2563eb 48%, #1d4ed8 100%);
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
}
.be-hero-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
  transform: translateX(-125%);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.be-hero-cta:hover::after { transform: translateX(125%); }

/* Tarjetas (producto y categoria): borde mas fino y sombra azulada al elevarse */
a.group.rounded-2xl, a.group.rounded-3xl, .be-card {
  border-color: rgba(148, 163, 184, .38);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .25s ease;
}
a.group.rounded-2xl:hover, a.group.rounded-3xl:hover, .be-card:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 28px 48px -26px rgba(30, 58, 138, .42);
  border-color: rgba(96, 165, 250, .6);
}

/* Botones de marca: pulsacion tactil y sombra suave */
button.bg-brand-600, a.bg-brand-600 { transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease; }
button.bg-brand-600:hover, a.bg-brand-600:hover { box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .7); }
button.bg-brand-600:active, a.bg-brand-600:active { transform: translateY(1px) scale(.985); }

/* Etiquetas de categoria sobre las fotos (blog y tarjetas): sin saltos de linea ni desbordes */
span.absolute.left-3.top-3.rounded-full { white-space: nowrap; width: max-content; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; font-size: .6rem; letter-spacing: .02em; padding-left: .6rem; padding-right: .6rem; }

/* Foco accesible mas visible y elegante */
:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(37, 99, 235, .18); }

/* Barra de desplazamiento fina en la pagina */
html { scrollbar-color: #94a3b8 #f1f5f9; }

@media (prefers-reduced-motion: reduce) {
  .tape-stripes { animation: none; }
  .be-hero-cta::after { display: none; }
  a.group.rounded-2xl, a.group.rounded-3xl, .be-card { transition: none; }
}