/* ================= GAUDETE BASE STYLES & FALLBACKS ================= */
a {
  text-decoration: none;
}
img, svg {
  vertical-align: middle;
}

/* ================= GAUDETE DARK MODE (Vigilia Sacra Nocturna) ================= */
/* Cero tonos grises: paleta litúrgica de vino tinto sacramental profundo, terciopelo nocturno y oro noble */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0e0307 !important;
  color: #fbf6f0 !important;
}

html.dark header {
  background-color: rgba(22, 6, 12, 0.97) !important;
  border-bottom-color: rgba(197, 160, 89, 0.3) !important;
}

html.dark nav {
  background-color: #17050d !important;
  border-color: rgba(197, 160, 89, 0.2) !important;
}

/* Superficies, Tarjetas y Paneles (Sustitución total de grises por vino sacramental cálido) */
html.dark .bg-white,
html.dark .bg-surface,
html.dark [class*="bg-surface/"] {
  background-color: #1c0712 !important;
  border-color: rgba(197, 160, 89, 0.25) !important;
  color: #fbf6f0 !important;
}

html.dark .bg-surface-parchment,
html.dark .bg-background,
html.dark .bg-surface-bright,
html.dark [class*="bg-surface-parchment/"] {
  background-color: #0e0307 !important;
}

html.dark .bg-surface-container-lowest,
html.dark [class*="bg-surface-container-lowest"] {
  background-color: #1a0610 !important;
  border-color: rgba(197, 160, 89, 0.22) !important;
}

html.dark .bg-surface-container-low,
html.dark [class*="bg-surface-container-low"] {
  background-color: #240917 !important;
  border-color: rgba(197, 160, 89, 0.25) !important;
}

html.dark .bg-surface-container,
html.dark [class*="bg-surface-container/"] {
  background-color: #2f0c1e !important;
  border-color: rgba(197, 160, 89, 0.28) !important;
}

html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest,
html.dark [class*="bg-surface-container-high/"],
html.dark [class*="bg-surface-container-highest/"] {
  background-color: #3d1027 !important;
  border-color: rgba(197, 160, 89, 0.32) !important;
}

/* Cabeceras de sección, breadcrumbs y banners */
html.dark section[class*="bg-surface"] {
  background-color: #16050e !important;
  border-bottom-color: rgba(197, 160, 89, 0.25) !important;
}

/* Resaltados Litúrgicos y Títulos */
html.dark .text-primary {
  color: #E5C88A !important;
}

html.dark .text-sacred-burgundy {
  color: #f7a8b4 !important;
}

html.dark .bg-sacred-burgundy,
html.dark .bg-primary {
  background-color: #781d2d !important;
  color: #ffffff !important;
}

html.dark .bg-sacred-burgundy:hover,
html.dark .bg-primary:hover {
  background-color: #922538 !important;
}

html.dark .text-text-main,
html.dark .text-on-surface {
  color: #fbf6f0 !important;
}

html.dark .text-text-subdued,
html.dark .text-on-surface-variant {
  color: #d9c8bc !important;
}

/* Bordes y Divisores en Oro y Vino Cálido */
html.dark .border-border-soft,
html.dark .border-outline-variant,
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant\/40 {
  border-color: rgba(197, 160, 89, 0.22) !important;
}

html.dark .divide-surface-container > * {
  border-color: rgba(197, 160, 89, 0.2) !important;
}

/* Campos de Formulario */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #19050f !important;
  color: #fbf6f0 !important;
  border-color: rgba(197, 160, 89, 0.35) !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #E5C88A !important;
  box-shadow: 0 0 0 2px rgba(229, 200, 138, 0.25) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(217, 200, 188, 0.5) !important;
}

/* Botones secundarios en Modo Oscuro */
html.dark button.bg-surface-container {
  background-color: #2f0c1e !important;
  color: #fbf6f0 !important;
  border: 1px solid rgba(197, 160, 89, 0.3) !important;
}
html.dark button.bg-surface-container:hover {
  background-color: #3d1027 !important;
}

/* Modales, Toasts y Alertas */
html.dark #sacredToast,
html.dark #sacred-toast,
html.dark #gaudete-cart-toast,
html.dark #quickViewModal > div > div,
html.dark #bold-checkout-modal > div,
html.dark #gaudete-cookie-banner {
  background-color: #1c0712 !important;
  color: #fbf6f0 !important;
  border-color: rgba(197, 160, 89, 0.45) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(120, 29, 45, 0.25) !important;
}

html.dark .theme-toggle-btn {
  color: #E5C88A !important;
}
html.dark .theme-toggle-btn:hover {
  background-color: rgba(197, 160, 89, 0.15) !important;
}

/* Pie de Página */
html.dark footer {
  background-color: #0b0205 !important;
  border-top-color: #C5A059 !important;
}

/* Transición Fluida */
body, header, nav, footer, div, a, button, input {
  transition-property: background-color, border-color, color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================= ÁNGEL FLOTANTE DE AYUDA DIVINA (WhatsApp sin fondo) ================= */
@keyframes divineAngelLevitate {
  0%, 100% {
    transform: translateY(0px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.45));
  }
  50% {
    transform: translateY(-4px);
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
  }
}

/* ================= BOTÓN FLOTANTE ÁNGEL WHATSAPP (INFERIOR DERECHA) ================= */
.gaudete-angel-aside {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.divine-angel-float {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  position: relative !important;
  animation: divineAngelLevitate 3s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform, filter;
  text-decoration: none !important;
  cursor: pointer !important;
}

.divine-angel-float:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.06) !important;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) !important;
}

.divine-angel-float img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  display: block !important;
  object-fit: contain !important;
}

/* ================= TEXTURA ORGÁNICA FRACTAL (Lienzo / Pergamino Sacro) ================= */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
html.dark body::before {
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* ================= EFECTOS DE ÚLTIMA GENERACIÓN (Estilo Somos de Pueblo) ================= */

/* Entrada Heroica Escalonada */
@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulso de Baliza Radiante (Beacon) */
@keyframes beaconPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(197, 160, 89, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0);
  }
}

@keyframes beaconPulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Efecto Shimmer de Carga Esqueletal */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(197, 160, 89, 0.06) 25%, rgba(197, 160, 89, 0.16) 50%, rgba(197, 160, 89, 0.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite linear;
}

html.dark .skeleton-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(197, 160, 89, 0.12) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite linear;
}

/* Sistema Scroll-Driven Reveal Suave - Failsafe: Elementos SIEMPRE visibles */
.reveal-init {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.reveal-init.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .divine-angel-float {
    animation: none !important;
  }
}

/* Elevación 3D y Resplandor Áureo en Tarjetas */
.card-hover-3d {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  will-change: transform, box-shadow;
}

.card-hover-3d:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -8px rgba(120, 29, 45, 0.16), 0 0 20px rgba(197, 160, 89, 0.18);
  border-color: rgba(197, 160, 89, 0.6) !important;
}

html.dark .card-hover-3d:hover {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(197, 160, 89, 0.25);
  border-color: rgba(229, 200, 138, 0.5) !important;
}

/* Punto de Baliza Radiante */
.beacon-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C5A059;
  display: inline-block;
  flex-shrink: 0;
  animation: beaconPulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.beacon-dot-green {
  background: #25D366;
  animation: beaconPulseGreen 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Botón Oficial WhatsApp (Alta Visibilidad y Contraste Garantizado) */
.btn-whatsapp {
  background-color: #25D366 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
}

.btn-whatsapp:hover {
  background-color: #1EBE5D !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
  transform: translateY(-1px);
}

.btn-whatsapp svg,
.btn-whatsapp span {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

html.dark .btn-whatsapp {
  background-color: #20BA56 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(32, 186, 86, 0.4) !important;
}

html.dark .btn-whatsapp:hover {
  background-color: #199E49 !important;
  color: #FFFFFF !important;
}

/* Micro-interacción Botón con Resplandor Áureo */
.btn-glow-sacred {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px -2px rgba(120, 29, 45, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.absolute.btn-glow-sacred,
.btn-glow-sacred.absolute {
  position: absolute !important;
}

.btn-glow-sacred:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -2px rgba(120, 29, 45, 0.45), 0 0 16px rgba(197, 160, 89, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-glow-sacred:active {
  transform: translateY(0px) scale(0.98);
}

/* ================= COMPONENTES VISUALES ALTA GAMA (SOMOS BERRAQUERA) ================= */

/* ── BARRA DE ANUNCIOS SUPERIOR CON DEGRADADO Y PÍLDORAS ── */
.top-promo-bar {
  background: linear-gradient(90deg, #521320 0%, #8B1E24 45%, #B3803E 100%);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid rgba(197, 160, 89, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 55;
}

.top-promo-content {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.promo-badge-pill {
  background: rgba(255, 255, 255, 0.18);
  padding: 0.2rem 0.65rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.promo-link-highlight {
  background: #FFFFFF;
  color: #8B1E24 !important;
  text-decoration: none;
  font-weight: 700;
  padding: 0.22rem 0.8rem;
  border-radius: 50px;
  font-size: 0.74rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}

.promo-link-highlight:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
  color: #6A141A !important;
}

/* ── NAVEGACIÓN Y ENLACES PILDORADOS ── */
.nav-pill-link {
  color: #4A4036;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  border-radius: 50px;
  border: 1px solid rgba(139, 30, 36, 0.15);
  background: #F2ECE1;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html.dark .nav-pill-link {
  color: #D9C8BC;
  background: #240917;
  border-color: rgba(229, 200, 138, 0.2);
}

.nav-pill-link:hover {
  color: #C5A059;
  border-color: #C5A059;
  background: #E8DEC8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 30, 36, 0.08);
}

html.dark .nav-pill-link:hover {
  background: #330C20;
  color: #F0CA7A;
  border-color: #E5C88A;
}

.nav-pill-link.active {
  color: #FFFFFF !important;
  border-color: #8B1E24;
  background: #8B1E24;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(139, 30, 36, 0.32);
}

html.dark .nav-pill-link.active {
  background: #B83A2E;
  border-color: #E5C88A;
  color: #FFFFFF !important;
}

/* ── PÍLDORAS DE FILTRADO DE CATEGORÍAS (CAT-PILL) ── */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 1.15rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4A4036;
  background: #FFFFFF;
  border: 1px solid rgba(139, 30, 36, 0.16);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

html.dark .cat-pill {
  background: #1C0712;
  color: #D9C8BC;
  border-color: rgba(229, 200, 138, 0.22);
}

.cat-pill:hover {
  border-color: #C5A059;
  color: #8B1E24;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(197, 160, 89, 0.16);
}

html.dark .cat-pill:hover {
  color: #E5C88A;
  border-color: #E5C88A;
  background: #240917;
}

.cat-pill.active {
  background: linear-gradient(135deg, #A82531 0%, #8B1E24 60%, #6A141A 100%);
  border-color: #8B1E24;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(139, 30, 36, 0.35);
  transform: translateY(-1px);
}

html.dark .cat-pill.active {
  background: linear-gradient(135deg, #B83A2E 0%, #8B1E24 60%, #5E141B 100%);
  border-color: #E5C88A;
  color: #FFFFFF !important;
}

/* ── BOTONES DE ACCIÓN DE ALTA GAMA (SOMOS BERRAQUERA) ── */
.btn-primary-sacred {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.6rem;
  border-radius: 50px;
  background: linear-gradient(135deg, #A82531 0%, #8B1E24 55%, #6A141A 100%);
  color: #FFFFFF !important;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  box-shadow: 0 6px 20px -2px rgba(139, 30, 36, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-sacred:hover {
  background: linear-gradient(135deg, #BC2C39 0%, #9C2229 55%, #7B171E 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -2px rgba(139, 30, 36, 0.48), 0 0 16px rgba(197, 160, 89, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-primary-sacred:active {
  transform: translateY(0px) scale(0.98);
}

.btn-secondary-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.6rem;
  border-radius: 50px;
  background: rgba(250, 247, 242, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #1C1814;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(197, 160, 89, 0.35);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .btn-secondary-glass {
  background: rgba(36, 9, 23, 0.75);
  color: #FBF6F0;
  border-color: rgba(229, 200, 138, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-secondary-glass:hover {
  border-color: #8B1E24;
  color: #8B1E24;
  background: #F2ECE1;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(197, 160, 89, 0.25);
}

html.dark .btn-secondary-glass:hover {
  color: #F0CA7A;
  border-color: #E5C88A;
  background: #240917;
}

.btn-secondary-glass:active {
  transform: translateY(0px) scale(0.98);
}

/* ── DEGRADADOS DE TEXTO EDITORIAL (CORMORANT GARAMOND) ── */
.text-gradient-sacred {
  background: linear-gradient(135deg, #B83A2E 0%, #8B1E24 40%, #C5A059 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.dark .text-gradient-sacred {
  background: linear-gradient(135deg, #F0CA7A 0%, #E5C88A 45%, #F7A8B4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1.15rem;
  border-radius: 50px;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(197, 160, 89, 0.4);
  box-shadow: 0 4px 18px -2px rgba(197, 160, 89, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #C5A059;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .hero-badge-pill {
  background: rgba(28, 7, 18, 0.85);
  border-color: rgba(229, 200, 138, 0.35);
  color: #E5C88A;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-badge-pill:hover {
  transform: translateY(-2px);
  border-color: #8B1E24;
  box-shadow: 0 8px 24px -2px rgba(139, 30, 36, 0.22);
}

html.dark .hero-badge-pill:hover {
  border-color: #E5C88A;
  box-shadow: 0 8px 24px -2px rgba(229, 200, 138, 0.25);
}

/* ── BANNER TOAST FLOTANTE DE NOTIFICACIÓN ── */
.sacred-toast-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #FFFFFF;
  border: 1.5px solid #C5A059;
  border-radius: 50px;
  padding: 0.75rem 1.4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(197, 160, 89, 0.2);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 90%;
  width: max-content;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html.dark .sacred-toast-banner {
  background: #1C0712;
  border-color: #E5C88A;
  color: #FBF6F0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(229, 200, 138, 0.25);
}

/* ================= CONTENEDOR HOMOGÉNEO DE PÁGINA (MÁRGENES LATERALES BALANCED) ================= */
.nosotros-page-container,
#nosotros-main {
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .nosotros-page-container,
  #nosotros-main {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .nosotros-page-container,
  #nosotros-main {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

/* ================= BARRA LATERAL LIMPIA Y BANNER DELGADO (PORTADA) ================= */
.topic-link-btn.active-topic {
  background-color: #6A1B29 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.topic-link-btn.active-topic span.text-noble-gold {
  color: #E5C88A !important;
}

.topic-link-btn.active-topic span[class*="bg-surface-container"] {
  background-color: #C5A059 !important;
  color: #6A1B29 !important;
  font-weight: 800 !important;
}

html.dark .topic-link-btn.active-topic {
  background-color: #6A1B29 !important;
  color: #FAF7F2 !important;
}

html.dark .topic-link-btn.active-topic span[class*="bg-surface-container"] {
  background-color: #D4AF37 !important;
  color: #1C0712 !important;
}

.hero-slide {
  transition: opacity 0.35s ease-in-out;
}