/* Darquino Historias Studio Pro Responsive CSS */
.darquino-story-wrapper {
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

/* Strict isolation: Prevent any story intro or overlay card from covering wp-admin */
body.wp-admin .darquino-intro-screen,
.wp-admin .darquino-intro-screen,
body.wp-admin .darquino-floating-pill,
.wp-admin .darquino-floating-pill {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: static !important;
}

/* Pantalla Previa Intro Screen (Frontend only) */
html:not(.darquino-story-entered),
/* 1. Bloqueo total de scroll y altura en viewport inicial */
html:not(.darquino-story-entered),
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Prevenir que LiteSpeed Cache o retrasos de JS dejen secciones en pantalla blanca */
.elementor-invisible,
.elementor-section.elementor-invisible,
.elementor-element.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 3. La Sección 1 (Portada) actúa como CORTINA FIJA DE PANTALLA COMPLETA */
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) .elementor-section:first-of-type,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) #darquinoIntro,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) .darquino-intro-section,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) .darquino-intro-curtain,
body:not(.wp-admin):not(.elementor-editor-active) .darquino-intro-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  z-index: 99999 !important;
  background-size: cover !important;
  background-position: center !important;
  box-sizing: border-box !important;
}

/* 4. Ocultar secciones 2 en adelante para que NADA se filtre ni se vea debajo */
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) .elementor-section:not(:first-of-type) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 5. Ocultar headers y footers del tema Kimono mientras la portada esté activa */
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) header,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) footer,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) .site-header,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) .site-footer,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) #pxl-header,
body:not(.elementor-editor-active):not(.wp-admin):not(.darquino-story-entered) #pxl-footer {
  display: none !important;
}

/* 6. Animación de apertura suave al hacer clic en Ingresar a la Historia */
body.darquino-story-entered {
  overflow: auto !important;
  height: auto !important;
  max-height: none !important;
}

body.darquino-story-entered .elementor-section:first-of-type,
body.darquino-story-entered #darquinoIntro,
body.darquino-story-entered .darquino-intro-section,
body.darquino-story-entered .darquino-intro-curtain,
body:not(.wp-admin):not(.elementor-editor-active) .darquino-intro-screen.is-opened {
  position: relative !important;
  animation: darquinoCurtainExit 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes darquinoCurtainExit {
  0% { opacity: 1; transform: translateY(0); max-height: 100vh; }
  60% { opacity: 0.15; transform: translateY(-25%); }
  100% {
    opacity: 0;
    transform: translateY(-100%);
    max-height: 0;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 7. Aparición suave y natural de las demás secciones */
body.darquino-story-entered .elementor-section:not(:first-of-type) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: darquinoSectionFade 0.65s ease-out forwards;
}

@keyframes darquinoSectionFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Compatibilidad con Elementor Editor */
body.elementor-editor-active, body.wp-admin { overflow: auto !important; height: auto !important; }
body.elementor-editor-active .elementor-section, body.wp-admin .elementor-section { position: relative !important; display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; }
body.elementor-editor-active .elementor-section:first-of-type, body.wp-admin .elementor-section:first-of-type, body.elementor-editor-active #darquinoIntro, body.elementor-editor-active .darquino-intro-section, body.elementor-editor-active .darquino-intro-curtain { min-height: 80vh !important; height: auto !important; }

.darquino-btn-ingresar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 42px;
  border: 1px solid rgba(255,255,255,0.8);
  background: transparent;
  color: #fff;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  border-radius: 9999px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.darquino-btn-ingresar:hover {
  background: #fff;
  color: #000;
  transform: scale(1.05);
}

/* Floating Navigation Dock (Centered, Frontend only) */
body:not(.wp-admin) .darquino-floating-pill {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(18, 18, 20, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9999px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  max-width: 90vw;
  overflow-x: auto;
}
.darquino-float-top {
  color: #D4AF37;
  text-decoration: none;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 9999px;
  cursor: pointer;
  background: transparent;
  border: none;
}
.darquino-float-item {
  color: #ccc;
  text-decoration: none;
  font-size: 11px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 9999px;
  transition: background 0.2s, color 0.2s;
}
.darquino-float-item:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Elementor Justified Gallery */
.elementor-gallery__container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1440px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.elementor-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}
.elementor-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.elementor-gallery-item:hover .elementor-gallery-image {
  transform: scale(1.05);
}