/* ==========================================================================
   LE COMPTOIR DES ESSENCES - HAUTE PARFUMERIE
   El Mostrador Mágico (Homepage CSS Architecture)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES DE DISEÑO & TOKENS DE LUJO
   -------------------------------------------------------------------------- */
:root {
  /* Paleta de Colores Restringida - Ultra-Lujo Botánico */
  --gold-matte: #C5A059;
  /* Oro Envejecido */
  --crema-suave: #F4F0EC;
  /* Crema Botica */
  --dark-apothecary: #080705;
  --dark-mahogany: rgba(15, 12, 10, 0.85);
  /* Fondos de paneles/tooltips */
  --vignette-black: rgba(5, 5, 5, 0.85);

  /* Tipografías Restringidas */
  --font-primary: 'Playfair Display', serif;
  /* Títulos y logo */
  --font-secondary: 'Lato', sans-serif;
  /* UI pequeña y botones */

  /* ==========================================================================
     CALIBRACIÓN DEL EASTER EGG (LIBRO MÁGICO)
     ========================================================================== */
  --hotspot-bottom: 2%;
  --hotspot-left: 56%;
  --hotspot-width: 18vw;
  --hotspot-height: 12vh;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font-secondary);
  background-color: #0A0A0A !important;
  margin: 0;
  padding: 0;
  color: var(--crema-suave);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. ARQUITECTURA DE LA ESCENA & CAPAS (Z-INDEX)
   -------------------------------------------------------------------------- */
.scene-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Layer: Canvas de Partículas (Z-Index 5) */
.particles-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  animation: boticarioFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Z-INDEX 0: El Escenario (Fondo pre-renderizado del Maestro Boticario) */
.scene-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background-image: url('assets/backgrounds/el-maestro-boticario-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  animation: boticarioFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes boticarioFadeIn {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1.0);
  }
}

/* Z-INDEX 10: Sombras y Viñeta */
.scene-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(circle at center,
      rgba(10, 8, 5, 0.05) 0%,
      rgba(5, 5, 5, 0.4) 60%,
      var(--vignette-black) 100%);
  animation: vignetteFadeIn 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes vignetteFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Z-INDEX 50: El Grimorio Secreto (Hotspot Base) */
.grimorio-hotspot-container,
#hotspot-grimorio,
#grimorio-hotspot {
  position: absolute;
  z-index: 50;
  pointer-events: auto !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Erradicación universal de bordes, marcos amarillos y outlines de depuración */
.grimorio-hotspot-container,
#hotspot-grimorio,
#grimorio-hotspot,
.hotspot {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
  -webkit-user-select: none;
  user-select: none;
}

.grimorio-hotspot-container:focus,
.grimorio-hotspot-container:focus-visible,
.grimorio-hotspot-container:active,
#hotspot-grimorio:focus,
#hotspot-grimorio:focus-visible,
#hotspot-grimorio:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 4. HALO DEL GRIMORIO: RESPIRACIÓN ORGÁNICA CON DESVANECIMIENTO A CERO */
.grimorio-halo {
    position: absolute !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.55) 0%, rgba(197, 160, 89, 0.30) 45%, rgba(0, 0, 0, 0) 75%) !important;
    mix-blend-mode: screen !important;
    pointer-events: none !important;
    animation: haloGrimorioVisible 6s ease-in-out infinite !important;
    z-index: 10 !important;
    transition: opacity 0.3s ease;
}

@keyframes haloGrimorioVisible {
    0%, 15% {
        opacity: 0;
        filter: drop-shadow(0 0 0 transparent);
        box-shadow: none;
        transform: scale(0.96);
    }
    50% {
        opacity: 0.75;
        box-shadow: 0 0 35px 12px rgba(212, 175, 55, 0.50), 0 0 60px 22px rgba(197, 160, 89, 0.25);
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.45));
        transform: scale(1.04);
    }
    85%, 100% {
        opacity: 0;
        filter: drop-shadow(0 0 0 transparent);
        box-shadow: none;
        transform: scale(0.96);
    }
}

/* Estado de Activación y Destello al Clicar el Grimorio */
.grimorio-hotspot-container.is-opening .grimorio-halo,
#hotspot-grimorio.is-opening .grimorio-halo {
  animation: none !important;
  opacity: 1 !important;
  box-shadow: 0 0 45px 16px rgba(212, 175, 55, 0.95), 0 0 80px 30px rgba(197, 160, 89, 0.55) !important;
  filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.9)) !important;
  transform: scale(1.06) !important;
  transition: all 0.25s ease !important;
}

/* B) Tarjeta Revelada Exclusivamente en Hover */
.grimorio-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(16, 12, 8, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(197, 160, 89, 0.45);
  border-radius: 4px;
  padding: 8px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9), 0 0 20px rgba(197, 160, 89, 0.35);
  transition: all 0.35s ease;
  white-space: nowrap;
  margin-bottom: 8px;
}

.grimorio-tooltip-title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #D4AF37;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.grimorio-tooltip-subtitle {
  display: none !important;
}

/* --------------------------------------------------------------------------
   REGLAS SANTIFICADAS HOME PC (>768px)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .scene-background {
    background-position: center 38%; /* Punto focal calibrado: preserva aire superior y mesa inferior */
    background-size: cover;
  }

  .hero-title .title-line-1,
  .hero-title .title-line-2 {
    display: inline;
  }

  .hero-title .title-line-1::after {
    content: " ";
  }

  .grimorio-hotspot-container,
  #hotspot-grimorio,
  #grimorio-hotspot {
    left: 54.3%;
    bottom: 8.7%;
    transform: translate(-50%, 40%); /* Centrado geométrico sobre las páginas abiertas */
    width: 260px;
    height: 110px;
  }

  .grimorio-halo {
    width: 260px;
    height: 110px;
  }
}

/* --------------------------------------------------------------------------
   ESTADOS HOVER AISLADOS (DISPOSITIVOS CON RATÓN / EVITA STICKY HOVER EN TÁCTIL)
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .grimorio-hotspot-container:hover .grimorio-halo,
  .grimorio-hotspot-container:focus-visible .grimorio-halo {
    animation: none !important;
    opacity: 0.85 !important;
    transform: scale(1.08) !important;
    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.55)) !important;
    box-shadow: 0 0 45px 15px rgba(212, 175, 55, 0.60), 0 0 70px 25px rgba(197, 160, 89, 0.35) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }

  .grimorio-hotspot-container:hover .grimorio-tooltip,
  .grimorio-hotspot-container:focus-visible .grimorio-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
  }
}

/* --------------------------------------------------------------------------
   BANNER CINEMATOGRÁFICO GLASSMORPHISM (GRIMORIO SECRETO)
   -------------------------------------------------------------------------- */
.grimorio-banner {
  position: fixed;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  width: 90%;
  max-width: 860px;
  background: rgba(18, 14, 10, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  padding: 1.25rem 2rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 175, 55, 0.35);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: top 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.grimorio-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.2), #D4AF37 40%, #FFF3B0 80%, #D4AF37 100%);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.9);
  opacity: 0;
  transition: width 2.4s linear, opacity 0.3s ease;
}

.grimorio-banner.active {
  top: 2rem;
  opacity: 1;
  pointer-events: auto;
}

.grimorio-banner.active::after {
  width: 100%;
  opacity: 1;
}

.grimorio-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
}

.grimorio-icon-svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7));
  animation: alchemySparkGlow 3s infinite ease-in-out;
}

@keyframes alchemySparkGlow {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5)); }
  50% { transform: scale(1.15) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.95)); }
}

.grimorio-banner-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.banner-title-line1 {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #D4AF37;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.banner-title-line2 {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  color: #F4F0EC;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.banner-subtitle {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-style: italic;
  color: #C5A059;
  letter-spacing: 0.04em;
  margin-top: 4px;
  opacity: 0.9;
}

/* Transición Fade Alquímico para cambio cinematográfico de sala (0.25s) */
.fade-alquimico {
  filter: blur(10px) brightness(0.25) !important;
  transform: scale(1.02);
  transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transición Ultra-Fluida de página completa a negro */
.fade-out-page {
  opacity: 0 !important;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --------------------------------------------------------------------------
   4. UI Y HEADER (TOP-RIGHT)
   -------------------------------------------------------------------------- */

.header-utilities {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.utility-link {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 400;
  color: var(--crema-suave);
  text-decoration: none;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.utility-link:hover {
  color: var(--gold-matte);
}

.cart-icon {
  color: var(--gold-matte);
  /* Cesta color Oro Envejecido */
  transition: opacity 0.3s ease;
}

.cart-icon:hover {
  opacity: 0.8;
}

/* Z-INDEX 30: UI Lateral Izquierda */
.main-ui {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;

  /* Layout Lateral Izquierdo Estricto */
  width: 35%;
  min-width: 320px;
  text-align: left;
  pointer-events: auto;
}

.brand-header {
  margin-bottom: 3rem;
}

.brand-logo-link {
  display: inline-block;
  text-decoration: none;
}

.brand-logo,
#brand-logo {
  max-width: 130px;
  height: auto;
  transform: scale(1);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --------------------------------------------------------------------------
   5. HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 4rem;
}

/* ==========================================================================
   1. TÍTULO PRINCIPAL: REALCE ÁUREO TRIDIMENSIONAL SIN MANCHAS
   ========================================================================== */
.hero-title {
    font-family: 'Cinzel', serif !important;
    display: block !important;
    max-width: 320px !important;
    line-height: 1.15 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0D59E 40%, #C5A059 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    /* Relieve nítido + aura dorada sutil que lo despega de la pared */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(229, 196, 131, 0.40)) !important;
}

.hero-subtitle {
  font-family: var(--font-secondary);
  font-size: 1.05rem;
  font-weight: 300;
  font-style: italic;
  color: var(--crema-suave);
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------------------------
   6. NAVEGACIÓN PRINCIPAL (REDISEÑO LÍQUIDO)
   -------------------------------------------------------------------------- */
.gamified-nav {
  width: 100%;
  margin-bottom: auto;
}

/* ==========================================================================
   2. ELEVACIÓN Y COMPACTACIÓN DEL MENÚ DE SALAS
   ========================================================================== */
#nav-grid,
.nav-grid,
.nav-salas-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Espaciado compacto para elevar el conjunto */
    margin-top: 14px !important;
    margin-bottom: 16px !important;
}

/* ==========================================================================
   1. ELIMINACIÓN TOTAL DE SUBRAYADOS Y LÍNEAS EN ENLACES DE SALAS
   ========================================================================== */
.botica-btn,
.botica-btn *,
.sala-item,
.sala-item *,
.btn-text,
.btn-subtext,
.sala-title,
.sala-desc {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none;
}

/* ==========================================================================
   TÍTULOS EN 1 LÍNEA + LEMAS GRANDES (15.5px) + VENTANA ADAPTATIVA
   ========================================================================== */
.botica-btn,
.sala-item {
    display: block !important;
    width: fit-content !important;
    max-width: 340px !important; /* Espacio suficiente para albergar el título en 1 sola línea */
    padding: 6px 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: 2px solid transparent !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* 1. TÍTULO DE SALA: EN UNA SOLA LÍNEA (NO SE PARTE) EN ORO NOBLE */
.botica-btn .btn-text,
.sala-title {
    font-family: 'Cinzel', serif !important;
    font-size: 16.5px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    color: #C5A059 !important;
    -webkit-text-fill-color: #C5A059 !important;
    white-space: nowrap !important; /* Bloquea la partición: LA RESERVA PRIVADA en 1 sola línea */
    display: block !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

/* Hover de títulos: Iluminación en Oro Cálido */
.botica-btn:hover .btn-text,
.sala-item:hover .sala-title {
    color: #E5C483 !important;
    -webkit-text-fill-color: #E5C483 !important;
    text-shadow: 0 0 14px rgba(229, 196, 131, 0.8), 0 2px 8px rgba(0, 0, 0, 0.95) !important;
}

/* 2. LEMAS DE LAS SALAS: TAMAÑO 15.5px, CURSIVA EDITORIAL Y 2 LÍNEAS */
.botica-btn .btn-subtext,
.sala-desc {
    font-family: var(--font-secondary, 'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif) !important;
    font-style: italic !important;
    font-size: 15.5px !important; /* Tamaño legible restaurado */
    font-weight: 400 !important;
    color: rgba(244, 240, 236, 0.90) !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95) !important;
    letter-spacing: 0.3px !important;
    margin-top: 3px !important;
    line-height: 1.35 !important;
    display: block !important;
    white-space: normal !important;
}

/* 3. HOVER: CRISTAL TRANSLÚCIDO ADAPTADO AL LARGO DEL TÍTULO */
.botica-btn:hover,
.sala-item:hover {
    background: linear-gradient(90deg, rgba(14, 13, 16, 0.55) 0%, rgba(20, 18, 22, 0.35) 80%, rgba(14, 13, 16, 0.15) 100%) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    border-left: 2.5px solid #C5A059 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 12px rgba(197, 160, 89, 0.08) !important;
}

/* Estados Hover de Logo y Botones aislados para dispositivos con ratón */
@media (hover: hover) and (pointer: fine) {
  .brand-logo-link:hover .brand-logo,
  .brand-logo-link:hover #brand-logo,
  .brand-logo:hover,
  #brand-logo:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.75)) brightness(1.2);
    opacity: 1;
  }
}

/* Mobile trigger estrictamente oculto en desktop (1920x1080) */
.mobile-menu-trigger,
#mobile-menu-trigger,
body[data-room="el-maestro-boticario"] #mobile-menu-trigger {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.brand-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 1.5rem;
  margin-top: 2rem;
  gap: 0.5rem;
}

.footer-text-main,
.footer-brand-signature {
  position: absolute !important;
  bottom: 28px !important;
  left: 36px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  z-index: 20 !important;
}

/* Las tres líneas comparten exactamente la misma configuración que la primera */
.footer-brand-signature p,
.footer-title,
.footer-subtitle,
.footer-tagline {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  color: #C5A059 !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}


/* Enlaces Legales Flotantes (Bottom-Right) */
.legal-links {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 40;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--crema-suave);
  opacity: 0.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.legal-links a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.legal-links a:hover {
  opacity: 1;
  color: var(--gold-matte);
}

/* ==========================================================================
   TÍTULO SUPERIOR MÓVIL: OCULTACIÓN ESTRICTA EN PC (0 IMPACTO DESKTOP)
   ========================================================================== */
.mobile-maestro-header-marquee {
  display: none !important;
}

/* Shimmer Dinámico Oro Champagne / Seda Metálica (Idéntico a La Reserva Privada) */
@keyframes goldShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE DESIGN (CALIBRACIÓN UI/UX MÓVIL QUIRÚRGICA)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   8. RESPONSIVE DESIGN (CALIBRACIÓN MÓVIL EXACTA Y BLINDAJE)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .main-ui {
    width: 100%;
    min-width: auto;
    padding: 0;
    pointer-events: none;
    justify-content: flex-start;
  }

  .scene-background {
    background-position: center 30% !important;
    background-size: cover !important;
  }

  body[data-room="el-maestro-boticario"] .scene-background {
    background-image: url('assets/backgrounds/el-maestro-boticario-bg-mobile.jpg') !important;
    background-position: center bottom !important;
    background-size: cover !important;
  }

  .header-utilities {
    top: 16px !important;
    right: 16px !important;
    gap: 12px !important;
    z-index: 50 !important;
  }

  .utility-link {
    font-size: 8.5px;
    letter-spacing: 0.15em;
  }

  /* 1. LOGOTIPO SUPERIOR IZQUIERDA (ESCALA NOBLE Y PROPORCIONADA) */
  body[data-room="el-maestro-boticario"] .logo-container,
  body[data-room="el-maestro-boticario"] .main-logo,
  body[data-room="el-maestro-boticario"] header img.logo,
  body[data-room="el-maestro-boticario"] .brand-emblem,
  body[data-room="el-maestro-boticario"] .brand-logo,
  body[data-room="el-maestro-boticario"] #brand-logo,
  .logo-container,
  .main-logo,
  header img.logo,
  .brand-emblem,
  .brand-logo,
  #brand-logo {
    position: absolute !important;
    top: 8px !important;
    left: 16px !important;
    margin: 0 !important;
    max-width: 62px !important;
    width: 62px !important;
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.75)) !important;
    z-index: 50 !important;
  }

  .brand-header {
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  .brand-logo-link {
    display: block !important;
    margin: 0 !important;
  }

  /* 1.1 TÍTULO MÓVIL SUPERIOR: LE COMPTOIR DES ESSENCES (HUECO SOBRE AVATAR) */
  body[data-room="el-maestro-boticario"] .mobile-maestro-header-marquee {
    display: block !important;
    position: absolute !important;
    top: 96px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    z-index: 35 !important;
    width: 100% !important;
    max-width: 380px !important;
    pointer-events: none !important;
    cursor: default !important;
  }

  /* Efecto WOW Canónico del Título de Sala La Reserva Privada (Réplica 1:1) */
  body[data-room="el-maestro-boticario"] .mobile-maestro-header-title {
    margin: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 3.5px !important;
    background: linear-gradient(120deg, #d8bf8d 0%, #ffffff 30%, #c9a86a 55%, #f4e8c1 80%, #b88d44 100%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: goldShimmer 7s ease-in-out infinite !important;
    filter: drop-shadow(0 2px 10px rgba(201, 168, 106, 0.3)) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }

  /* 2. CONTENEDOR Y TÍTULO "EL MAESTRO BOTICARIO" */
  .maestro-header-block,
  .title-container,
  .hero-section {
    position: absolute !important;
    top: 40.5% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-width: 360px !important;
    text-align: center !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    background: radial-gradient(ellipse at center, rgba(8, 6, 4, 0.55) 0%, rgba(8, 6, 4, 0) 80%) !important;
    z-index: 25 !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-title,
  h1.maestro-title {
    margin: 0 0 6px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.16em !important;
    line-height: 1.18 !important;
    color: #E8C86A !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.85) !important;
  }

  .hero-title .title-line-1,
  .hero-title .title-line-2 {
    display: block !important;
  }

  /* 3. LEMA EN 3 LÍNEAS CON SOMBRA EN RELIEVE DE ALTO CONTRASTE */
  .hero-subtitle,
  .lema-boticario,
  .hero-tagline {
    margin: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em !important;
    color: #F2E5D0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 1) !important;
    opacity: 0.98 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hero-subtitle span,
  .lema-boticario span {
    display: inline-block !important;
  }

  @keyframes luxuryAuraPulseDark {
    0%, 100% {
      color: #D4AF37;
      text-shadow: 
        0 0 8px rgba(212, 175, 55, 0.7),
        0 0 16px rgba(212, 175, 55, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.95);
    }
    50% {
      color: #FFF6D6;
      text-shadow: 
        0 0 16px rgba(212, 175, 55, 1),
        0 0 28px rgba(255, 215, 0, 0.85),
        0 0 8px rgba(255, 255, 255, 0.65),
        0 2px 6px rgba(0, 0, 0, 0.95);
    }
  }

  @keyframes lineAuraPulse {
    0%, 100% {
      width: 55%;
      box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
    }
    50% {
      width: 85%;
      box-shadow: 0 0 14px rgba(212, 175, 55, 1);
    }
  }

  /* 3. BOTÓN CINCELADO EN EL MOSTRADOR (RÉPLICA CANÓNICA 1:1 TODAS LAS SALAS) */
  body[data-room="el-maestro-boticario"] #mobile-menu-trigger,
  body[data-room="el-maestro-boticario"] .mobile-menu-trigger.btn-cincelado,
  body[data-room="el-maestro-boticario"] .mobile-menu-trigger,
  .mobile-menu-trigger.btn-cincelado,
  .explorar-colecciones-btn,
  #explorar-trigger,
  .collections-trigger,
  .mobile-menu-trigger {
    position: absolute !important;
    bottom: 58px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    z-index: 45 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body[data-room="el-maestro-boticario"] #mobile-menu-trigger .btn-cincelado-text,
  body[data-room="el-maestro-boticario"] .mobile-menu-trigger .btn-cincelado-text,
  .mobile-menu-trigger .btn-cincelado-text {
    font-family: 'Cinzel', serif !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 3.5px !important;
    text-align: center !important;
    color: #D4AF37;
    text-shadow: 
      0 0 8px rgba(212, 175, 55, 0.7),
      0 0 16px rgba(212, 175, 55, 0.4),
      0 2px 4px rgba(0, 0, 0, 0.95);
    animation: luxuryAuraPulseDark 3s ease-in-out infinite !important;
    transition: all 0.35s ease !important;
  }

  body[data-room="el-maestro-boticario"] #mobile-menu-trigger .btn-cincelado-line,
  body[data-room="el-maestro-boticario"] .mobile-menu-trigger .btn-cincelado-line,
  .mobile-menu-trigger .btn-cincelado-line {
    height: 1.5px !important;
    background: linear-gradient(90deg, transparent 0%, #D4AF37 50%, transparent 100%) !important;
    margin-top: 4px !important;
    animation: lineAuraPulse 3s ease-in-out infinite !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  body[data-room="el-maestro-boticario"] #mobile-menu-trigger:hover .btn-cincelado-text,
  body[data-room="el-maestro-boticario"] #mobile-menu-trigger:active .btn-cincelado-text,
  body[data-room="el-maestro-boticario"] #mobile-menu-trigger[aria-expanded="true"] .btn-cincelado-text,
  .mobile-menu-trigger:hover .btn-cincelado-text,
  .mobile-menu-trigger:active .btn-cincelado-text,
  .mobile-menu-trigger[aria-expanded="true"] .btn-cincelado-text {
    color: #D4AF37 !important;
    letter-spacing: 4px !important;
    text-shadow: 0 0 18px rgba(212, 175, 55, 1), 0 0 30px rgba(212, 175, 55, 0.8) !important;
  }

  body[data-room="el-maestro-boticario"] #mobile-menu-trigger:hover .btn-cincelado-line,
  body[data-room="el-maestro-boticario"] #mobile-menu-trigger:active .btn-cincelado-line,
  body[data-room="el-maestro-boticario"] #mobile-menu-trigger[aria-expanded="true"] .btn-cincelado-line,
  .mobile-menu-trigger:hover .btn-cincelado-line,
  .mobile-menu-trigger:active .btn-cincelado-line,
  .mobile-menu-trigger[aria-expanded="true"] .btn-cincelado-line {
    width: 100% !important;
    box-shadow: 0 0 14px rgba(212, 175, 55, 1) !important;
  }

  /* 4. MENÚ DESPLEGABLE DE 4 SALAS (MÁS TRANSLÚCIDO Y CRISTALINO) */
  .salas-dropdown,
  .collections-menu,
  .nav-salas-panel,
  .nav-grid {
    position: absolute !important;
    bottom: 120px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: 88% !important;
    max-width: 340px !important;
    background: rgba(10, 8, 6, 0.42) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 8px !important;
    padding: 12px 10px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(212, 175, 55, 0.04) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important;
    z-index: 40 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin: 0 !important;
  }

  .salas-dropdown.active,
  .collections-menu.active,
  .nav-salas-panel.active,
  .nav-salas-panel.is-open,
  .nav-grid.mobile-open,
  .salas-dropdown.mobile-open,
  .collections-menu.mobile-open,
  .nav-salas-panel.mobile-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .salas-dropdown .sala-item,
  .collections-menu .sala-item,
  .nav-grid .botica-btn {
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
    border-left: none !important;
    text-align: left !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .salas-dropdown .sala-item:last-child,
  .collections-menu .sala-item:last-child,
  .nav-grid .botica-btn:last-child {
    border-bottom: none !important;
  }

  .salas-dropdown .sala-title,
  .collections-menu .sala-title,
  .nav-grid .botica-btn .btn-text {
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    color: #E8C86A !important;
    letter-spacing: 0.1em !important;
  }

  .salas-dropdown .sala-desc,
  .collections-menu .sala-desc,
  .nav-grid .botica-btn .btn-subtext {
    font-family: var(--font-secondary) !important;
    font-size: 0.62rem !important;
    color: #D6C9B4 !important;
    margin-top: 2px !important;
    opacity: 0.85 !important;
  }

  /* Coordenadas Definitivas Santificadas Móvil (Calibradas al Cuaderno Vertical 1080x2340) */
  .grimorio-hotspot-container,
  #hotspot-grimorio,
  #grimorio-hotspot {
    top: 83.5% !important;
    left: 53.8% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 155px !important;
    height: 44px !important;
    border-radius: 50% !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .grimorio-halo {
    width: 100%;
    height: 100%;
  }

  .grimorio-tooltip {
    display: none !important;
  }

  .grimorio-banner {
    width: 94%;
    padding: 0.9rem 1.2rem;
  }

  /* 5. PIE DE PÁGINA MÓVIL (3 LÍNEAS IZQUIERDA Y COOKIES DERECHA) */
  .frase-institucional-izq,
  .brand-footer-motto,
  .brand-footer {
    display: block !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 14px !important;
    font-size: 0.50rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
    color: #B8A68B !important;
    opacity: 0.85 !important;
    text-align: left !important;
    z-index: 30 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .frase-institucional-izq .footer-text-main,
  .brand-footer-motto .footer-text-main,
  .brand-footer .footer-text-main,
  .frase-institucional-izq .footer-brand-signature,
  .brand-footer-motto .footer-brand-signature,
  .brand-footer .footer-brand-signature {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    font-size: 0.50rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
    color: #B8A68B !important;
    opacity: 0.85 !important;
    max-width: 190px !important;
    text-align: left !important;
  }

  .frase-institucional-izq .footer-brand-signature p,
  .brand-footer-motto .footer-brand-signature p,
  .brand-footer .footer-brand-signature p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  .footer-cookies,
  .privacy-link,
  .legal-footer,
  .legal-links {
    position: absolute !important;
    bottom: 10px !important;
    right: 14px !important;
    left: auto !important;
    font-size: 0.50rem !important;
    letter-spacing: 0.06em !important;
    color: #A69680 !important;
    opacity: 0.8 !important;
    text-decoration: none !important;
    z-index: 30 !important;
  }

  /* 6. SALA 4 (LA TRASTIENDA) - CENTRADO EXACTO DEL AVATAR */
  .scene-trastienda,
  .trastienda-bg,
  body.la-trastienda,
  .trastienda-container {
    background-position: 53% center !important;
    background-size: cover !important;
  }

  .trastienda-avatar-img {
    max-width: 90% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
}

/* --------------------------------------------------------------------------
   9. SALA PURA ELEGANCIA (SALA MUJERES)
   -------------------------------------------------------------------------- */
.hotspot {
  position: absolute;
  z-index: 10;
  transform: translateX(-50%);
  height: 18vh;
  max-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
}

.product-image {
  height: 100%;
  max-height: 20vh;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s ease-out, filter 0.4s ease-out;
  transform-origin: bottom center;
}

.catalog-cta,
.catalog-trigger {
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(15, 15, 15, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: #D4AF37;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 3px;
  padding: 0.65rem 1.6rem;
  max-width: 280px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.4s ease;
}

.catalog-cta:hover,
.catalog-trigger:hover {
  transform: translateX(-50%) scale(1.04);
  border-color: #D4AF37;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  color: #F3E5AB;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
  background: rgba(5, 5, 5, 0.9);
}

@media (max-width: 768px) {
  .hotspot {
    height: 11vh;
    max-height: 12vh;
  }

  .product-image {
    max-height: 11vh;
  }

  .hotspot.left {
    left: 35%;
    bottom: 44%;
    transform: translateX(-50%);
  }

  .hotspot.right {
    left: auto;
    right: 35%;
    bottom: 44%;
    transform: translateX(50%);
  }

  .central-logo {
    width: 135px;
    left: 50%;
    bottom: 30%;
  }

  .catalog-cta,
  .catalog-trigger {
    padding: 0.5rem 1.1rem;
    font-size: 0.62rem;
    letter-spacing: 2px;
    bottom: 14%;
    max-width: 220px;
  }
}

@media (max-width: 480px) {
  .hotspot {
    height: 10vh;
    max-height: 11vh;
  }

  .product-image {
    max-height: 10vh;
  }

  .hotspot.left {
    left: 35%;
    bottom: 44%;
  }

  .hotspot.right {
    right: 35%;
    bottom: 44%;
  }

  .central-logo {
    width: 130px;
    bottom: 31%;
  }

  .catalog-cta,
  .catalog-trigger {
    padding: 0.45rem 0.95rem;
    font-size: 0.56rem;
    letter-spacing: 1.5px;
    bottom: 14%;
  }
}

/* ==========================================================================
   DISPARADOR DEL BUSCADOR EN MOSTRADOR DERECHO
   ========================================================================== */
.boticario-consult-container,
#boticario-consult-wrapper {
  position: static;
  z-index: 50;
}

/* ==========================================================================
   BOTÓN CONSULTAR: UBICACIÓN SUPERIOR (BAJO CONTACTO) + GLOW TRASERO SUTIL
   ========================================================================== */
#btn-consultar-boticario,
.btn-consultar-boticario,
.btn-boticario,
.global-btn-consultar {
    position: absolute !important;
    top: 82px !important; /* Desciende la posición para dar margen respecto a CONTACTO */
    right: 3.5% !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 60 !important;
    
    background: rgba(12, 11, 14, 0.92) !important;
    border: 1px solid rgba(197, 160, 89, 0.60) !important;
    color: #E5C483 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 20px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    font-family: 'Cinzel', serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    
    cursor: pointer !important;
    pointer-events: auto !important;
    border-radius: 2px !important;
    
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    
    /* Brillo trasero áureo sutil y continuo */
    animation: glowBoticarioSuperior 3.5s ease-in-out infinite !important;
    transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

#btn-consultar-boticario svg,
#btn-consultar-boticario i,
.btn-consultar-boticario svg,
.btn-consultar-boticario i,
.btn-boticario svg,
.global-btn-consultar svg {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    line-height: 1 !important;
    stroke: #E5C483 !important;
    color: #E5C483 !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

#btn-consultar-boticario span,
.btn-consultar-boticario span,
.btn-boticario span,
.global-btn-consultar span {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Hover: Realce limpio */
#btn-consultar-boticario:hover,
.btn-consultar-boticario:hover,
.btn-boticario:hover,
.global-btn-consultar:hover {
    transform: translateY(-1px) !important;
    border-color: #E5C483 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 22px 4px rgba(229, 196, 131, 0.45), 0 4px 15px rgba(0, 0, 0, 0.8) !important;
}

#btn-consultar-boticario:hover svg,
#btn-consultar-boticario:hover i,
.btn-consultar-boticario:hover svg,
.btn-consultar-boticario:hover i,
.btn-boticario:hover svg,
.global-btn-consultar:hover svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Animación del resplandor trasero */
@keyframes glowBoticarioSuperior {
    0%, 100% {
        box-shadow: 0 0 12px 2px rgba(197, 160, 89, 0.22), 0 3px 10px rgba(0, 0, 0, 0.75);
        border-color: rgba(197, 160, 89, 0.45);
    }
    50% {
        box-shadow: 0 0 22px 5px rgba(229, 196, 131, 0.48), 0 4px 15px rgba(0, 0, 0, 0.85);
        border-color: rgba(229, 196, 131, 0.85);
    }
}

@media (max-width: 1023px) {
  #btn-consultar-boticario {
    right: 6% !important;
    bottom: 14% !important;
    padding: 10px 18px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 768px) {
  body[data-room="el-maestro-boticario"] #btn-consultar-boticario,
  body[data-room="el-maestro-boticario"] .btn-consultar-boticario,
  #btn-consultar-boticario,
  .btn-consultar-boticario {
    position: absolute !important;
    top: 48px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
    font-size: 7px !important;
    letter-spacing: 0.8px !important;
    z-index: 50 !important;
    border-radius: 2px !important;
    line-height: 22px !important;
    box-sizing: border-box !important;
  }

  body[data-room="el-maestro-boticario"] #btn-consultar-boticario svg,
  body[data-room="el-maestro-boticario"] .btn-consultar-boticario svg,
  #btn-consultar-boticario svg,
  .btn-consultar-boticario svg {
    width: 9px !important;
    height: 9px !important;
    margin-right: 4px !important;
  }

  body[data-room="el-maestro-boticario"] #btn-consultar-boticario span,
  body[data-room="el-maestro-boticario"] .btn-consultar-boticario span,
  #btn-consultar-boticario span,
  .btn-consultar-boticario span {
    display: inline-block !important;
    font-size: 7px !important;
    letter-spacing: 0.8px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 480px) {
  body[data-room="el-maestro-boticario"] #btn-consultar-boticario,
  body[data-room="el-maestro-boticario"] .btn-consultar-boticario,
  #btn-consultar-boticario,
  .btn-consultar-boticario {
    top: 48px !important;
    right: 16px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
    font-size: 7px !important;
    letter-spacing: 0.8px !important;
  }

  body[data-room="el-maestro-boticario"] #btn-consultar-boticario svg,
  body[data-room="el-maestro-boticario"] .btn-consultar-boticario svg,
  #btn-consultar-boticario svg,
  .btn-consultar-boticario svg {
    width: 9px !important;
    height: 9px !important;
    margin-right: 4px !important;
  }

  body[data-room="el-maestro-boticario"] #btn-consultar-boticario span,
  body[data-room="el-maestro-boticario"] .btn-consultar-boticario span,
  #btn-consultar-boticario span,
  .btn-consultar-boticario span {
    display: inline-block !important;
    font-size: 7px !important;
    letter-spacing: 0.8px !important;
    line-height: 1 !important;
  }
}