/* ===== QUINTAESENCIA - CUSTOM STYLES ===== */

:root{
 --color-primary:#ffd700;
 --color-accent:#007bff;
 --color-dark:#0a0a0a;
 --color-text:#e0e0e0;
 --color-text-muted:#999;
 --color-orange:#ff6b00;
}

/* Global box-sizing reset for responsive design */
*,
*::before,
*::after{
 box-sizing:border-box;
}

html{
 background-color:var(--color-dark);
 width:100%;
 overflow-x:hidden;
 overflow-y:auto;
 box-sizing:border-box;
 scroll-behavior:smooth;
}

body{
 background-color:var(--color-dark);
 background-image:url('/wp-content/uploads/2025/05/mapamundi.webp');
 background-size:cover;
 background-position:center;
 background-attachment:fixed;
 background-repeat:no-repeat;
 color:var(--color-text);
 font-family:'Georgia','Garamond',serif;
 position:relative;
 width:100%;
 max-width:100%;
 overflow-x:hidden !important;
 overflow-y:auto;
 margin:0;
 padding:0;
 box-sizing:border-box;
}

/* Overlay global sutil para legibilidad */
body::before{
 content:'';
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:linear-gradient(135deg,rgba(10,5,25,0.30) 0%,rgba(5,10,40,0.30) 50%,rgba(5,25,25,0.30) 100%);
 pointer-events:none;
 z-index:0;
}

/* ===== HERO SECTION ===== */
.wp-block-group[style*="100vh"]{
 position:relative;
 overflow:visible;
}

.wp-block-group h1{
 animation:titleGlow 3s ease-in-out infinite;
 text-shadow:0 0 30px rgba(255,215,0,0.8),0 0 60px rgba(255,100,0,0.5) !important;
}

@keyframes titleGlow{
 0%,100%{ text-shadow:0 0 30px rgba(255,215,0,0.8),0 0 60px rgba(255,100,0,0.5);}
 50%{ text-shadow:0 0 60px rgba(255,215,0,1),0 0 100px rgba(255,100,0,0.8);}
}

/* Botones */
.wp-block-button__link{
 transition:all 0.3s ease !important;
 border-radius:8px !important;
}

.wp-block-button__link:hover{
 transform:scale(1.05) !important;
 box-shadow:0 0 50px rgba(0,123,255,1) !important;
}

/* ===== IMÁGENES ===== */
.wp-block-image{
 border-radius:15px;
 box-shadow:0 0 40px rgba(255,215,0,0.3);
 overflow:hidden;
 transition:all 0.3s ease;
 max-width:100%;
 margin-left:auto;
 margin-right:auto;
}

.wp-block-image:hover{
 box-shadow:0 0 60px rgba(255,215,0,0.5);
 transform:translateY(-5px);
}

.wp-block-image img{
 border-radius:15px;
 display:block;
 width:100%;
 height:auto;
 max-width:100%;
}

/* ===== TÍTULOS ===== */
.wp-block-heading{
 font-weight:900 !important;
 letter-spacing:2px !important;
 text-transform:uppercase !important;
}

h1.wp-block-heading,
h2.wp-block-heading{
 color:var(--color-primary) !important;
}

/* Ocultar título QUINTAESENCIA redundante */
h1 {
 display:none !important;
}

/* ===== SECCIONES ===== */
.wp-block-group{
 transition:all 0.3s ease;
 max-width:100%;
 overflow-x:hidden;
 width:100%;
}

/* Fondo oscuro */
.wp-block-group[style*="0a0a0a"],
.wp-block-group[style*="background-color:rgb"]{
 position:relative;
 max-width:100%;
 overflow-x:hidden;
}

/* ===== PÁRRAFOS ===== */
.wp-block-paragraph{
 line-height:1.8;
}

/* ===== LISTAS ===== */
.wp-block-list{
 list-style-position:inside;
}

.wp-block-list li{
 margin-bottom:15px;
 padding-left:0;
}

.wp-block-list li::before{
 content:'⚔️ ';
 margin-right:10px;
}

/* ===== COLUMNAS ===== */
.wp-block-column{
 transition:all 0.3s ease;
}

.wp-block-column:hover{
 transform:translateY(-5px);
}

/* ===== EFECTOS HOVER EN CARDS ===== */
.wp-block-group[style*="rgba(255,215,0,0.05)"]{
 border-radius:15px;
 transition:all 0.3s ease;
}

.wp-block-group[style*="rgba(255,215,0,0.05)"]:hover{
 background-color:rgba(255,215,0,0.1) !important;
 box-shadow:0 0 20px rgba(255,215,0,0.3);
 transform:translateY(-5px);
}

/* ===== VIDEOS ===== */
.wp-block-html{
 margin:50px 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
 .wp-block-heading{
 font-size:2rem !important;
 }

 h1.wp-block-heading{
 font-size:3rem !important;
 }
}

@media (max-width:768px){
 /* Navbar adjustments for mobile - COMPACTO Y FIJO */
 .navbar-global{
 display:flex !important;
 flex-wrap:wrap !important;
 justify-content:center !important;
 align-items:flex-start !important;
 padding:0 12px !important;
 gap:8px !important;
 width:100% !important;
 min-height:64px !important;
 background:#0a0a0a !important;
 position:fixed !important;
 top:0 !important;
 left:0 !important;
 z-index:9999 !important;
 transition:transform 0.3s ease !important;
 }

 .navbar-global a{
 margin-left:-20px !important;
 margin-right:auto !important;
 }

 .navbar-global > * {
 margin:0 !important;
 padding:0 !important;
 max-height:40px !important;
 overflow:hidden !important;
 }

 .navbar-global a{
 display:flex !important;
 flex-direction:row !important;
 align-items:center !important;
 justify-content:center !important;
 gap:6px !important;
 flex:0 0 auto !important;
 min-width:0 !important;
 padding:0 !important;
 margin:0 !important;
 }

 .navbar-global a img{
 width:32px !important;
 height:32px !important;
 flex-shrink:0 !important;
 }

 .navbar-global a span,
 .navbar-global a [class*="QUINTAESENCIA"]{
 font-size:0.9rem !important;
 text-align:center !important;
 margin:0 !important;
 white-space:nowrap !important;
 line-height:1.1 !important;
 }

 .navbar-global button[aria-label*="Toggle"],
 .navbar-global button[aria-label*="menu"]{
 position:absolute !important;
 right:8px !important;
 top:50% !important;
 transform:translateY(-50%) !important;
 flex-shrink:0 !important;
 width:40px !important;
 height:40px !important;
 padding:0 !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 background:rgba(255,215,0,0.1) !important;
 border:1px solid rgba(255,215,0,0.3) !important;
 border-radius:4px !important;
 }


 body{
 padding:0 !important;
 margin:0 !important;
 }

 /* Menú desplegable - oculto por defecto */
 .navbar-global ul {
 display:none !important;
 width:100% !important;
 flex-basis:100% !important;
 background:#0a0a0a !important;
 margin:0 !important;
 padding:15px 0 !important;
 max-height:400px !important;
 overflow-y:auto !important;
 border-top:1px solid rgba(255,215,0,0.2) !important;
 }

 .navbar-global ul.open,
 .navbar-global ul.active {
 display:block !important;
 }


 /* Ocultar botones de descarga (Windows, Mac, Steam, Android, iOS) en móvil */
 div[style*="position:absolute"][style*="bottom:20px"][style*="left:50%"]{
 display:none !important;
 }

 h1.wp-block-heading{
 font-size:1.8rem !important;
 margin-top:40px !important;
 margin-bottom:20px !important;
 }

 h2.wp-block-heading{
 font-size:1.3rem !important;
 margin-top:30px !important;
 margin-bottom:15px !important;
 }

 .wp-block-paragraph{
 font-size:0.9rem !important;
 margin:0 15px !important;
 }

 .wp-block-columns{
 flex-direction:column !important;
 margin:0 15px !important;
 }

 .wp-block-column{
 flex-basis:100% !important;
 margin-bottom:20px;
 margin:0 !important;
 }

 .wp-block-button{
 width:auto !important;
 display:inline-block !important;
 margin:5px !important;
 }

 .wp-block-button__link{
 width:auto !important;
 padding:10px 15px !important;
 margin:0 !important;
 display:inline-block !important;
 white-space:nowrap !important;
 }

 /* Contenedores de botones centrados */
 div[style*="display"],
 [class*="download"],
 [class*="button-group"],
 .wp-block-buttons {
 text-align:center !important;
 display:flex !important;
 flex-wrap:wrap !important;
 justify-content:center !important;
 gap:10px !important;
 }

 /* Videos responsivos */
 .wp-block-embed{
 margin:20px 0 !important;
 width:100% !important;
 max-width:100% !important;
 }

 .wp-block-embed iframe{
 width:100% !important;
 height:auto !important;
 max-width:100% !important;
 aspect-ratio:16/9 !important;
 }

 /* YouTube video containers - FULL WIDTH */
 .wp-block-html{
 margin:20px 0 !important;
 width:100% !important;
 padding:0 !important;
 box-sizing:border-box !important;
 position:relative !important;
 overflow:hidden !important;
 }

 .wp-block-html iframe{
 width:100% !important;
 max-width:100% !important;
 height:auto !important;
 aspect-ratio:3/2 !important;
 min-height:200px !important;
 display:block !important;
 border:none !important;
 }

 /* Ocultar TODO dentro del wp-block-html excepto iframe */
 .wp-block-html::before,
 .wp-block-html::after,
 .wp-block-html > *:not(iframe) {
 display:none !important;
 }

 /* Force single column for video containers */
 .wp-block-columns,
 .wp-block-columns.has-3-columns,
 .wp-block-columns.has-2-columns {
 flex-direction:column !important;
 width:100% !important;
 }

 .wp-block-column {
 flex-basis:100% !important;
 width:100% !important;
 margin:0 !important;
 margin-bottom:20px !important;
 padding:0 !important;
 }

 .wp-block-columns.has-3-columns .wp-block-column {
 flex-basis:100% !important;
 width:100% !important;
 margin-bottom:20px !important;
 }

 /* Fuerza TODOS los iframes a 100% width */
 iframe {
 width:100% !important;
 max-width:100% !important;
 height:auto !important;
 }

 /* Video wrapper alignment */
 [style*="youtube"],
 .youtube-video {
 width:100% !important;
 max-width:100% !important;
 }

 /* Fuerza contenedores flexbox a columna */
 [style*="display: flex"],
 [style*="display:flex"] {
 flex-direction:column !important;
 width:100% !important;
 }

 /* Fuerza cualquier div contenedor a 100% width */
 div[style*="grid-template-columns"],
 div[style*="grid-template"] {
 grid-template-columns:1fr !important;
 }

 /* Contenedor principal con márgenes */
 .wp-block-group,
 [class*="wp-block-group"],
 .wp-site-blocks > * {
 margin-left:0 !important;
 margin-right:0 !important;
 width:100% !important;
 box-sizing:border-box !important;
 }

 .wp-block-group{
 padding:15px !important;
 }

 /* Semi-transparent containers - FULL WIDTH */
 .wp-block-group[style*="rgba"],
 .wp-block-group[style*="0a0a0a"],
 .wp-block-group[style*="background"]{
 width:100vw !important;
 margin-left:calc(-50vw + 50%) !important;
 margin-right:calc(-50vw + 50%) !important;
 margin-top:20px !important;
 margin-bottom:20px !important;
 padding:20px 15px !important;
 box-sizing:border-box !important;
 position:relative !important;
 }

 /* Asegurar que contenido interior se vea bien */
 .wp-block-group[style*="rgba"] *,
 .wp-block-group[style*="0a0a0a"] * {
 max-width:calc(100vw - 30px) !important;
 overflow-x:hidden !important;
 }

 /* Imágenes responsive - VISIBLE */
 .wp-block-image{
 margin:20px 0 !important;
 width:100% !important;
 display:block !important;
 }

 .wp-block-image img{
 width:100% !important;
 max-width:100% !important;
 height:auto !important;
 display:block !important;
 }

 /* Grid de personajes en móvil */
 .personajes-container{
 padding:0 10px !important;
 }

 .personajes-grid{
 grid-template-columns:repeat(3,1fr) !important;
 gap:5px !important;
 }

 .wp-block-query{
 grid-template-columns:repeat(3,1fr) !important;
 width:calc(100% - 20px) !important;
 max-width:100% !important;
 padding:0 10px !important;
 margin:20px auto !important;
 gap:5px !important;
 }
}

@media (max-width:480px){
 /* Navbar adjustments for small mobile - MÁS COMPACTO */
 .navbar-global{
 display:flex !important;
 flex-wrap:wrap !important;
 justify-content:center !important;
 align-items:flex-start !important;
 padding:0 12px !important;
 gap:8px !important;
 width:100% !important;
 min-height:64px !important;
 background:#0a0a0a !important;
 position:relative !important;
 }

 .navbar-global a{
 margin-left:-20px !important;
 margin-right:auto !important;
 }

 .navbar-global > * {
 margin:0 !important;
 padding:0 !important;
 max-height:40px !important;
 overflow:hidden !important;
 }

 .navbar-global a{
 display:flex !important;
 flex-direction:row !important;
 align-items:center !important;
 justify-content:center !important;
 gap:6px !important;
 flex:0 0 auto !important;
 min-width:0 !important;
 padding:0 !important;
 margin:0 !important;
 }

 .navbar-global a img{
 width:32px !important;
 height:32px !important;
 flex-shrink:0 !important;
 }

 .navbar-global a span,
 .navbar-global a [class*="QUINTAESENCIA"]{
 font-size:0.9rem !important;
 text-align:center !important;
 margin:0 !important;
 white-space:nowrap !important;
 line-height:1.1 !important;
 }

 .navbar-global button[aria-label*="Toggle"],
 .navbar-global button[aria-label*="menu"]{
 position:absolute !important;
 right:8px !important;
 top:50% !important;
 transform:translateY(-50%) !important;
 flex-shrink:0 !important;
 width:40px !important;
 height:40px !important;
 padding:0 !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 background:rgba(255,215,0,0.1) !important;
 border:1px solid rgba(255,215,0,0.3) !important;
 border-radius:4px !important;
 }


 /* Force single column for videos on small mobile */
 .wp-block-columns,
 .wp-block-columns.has-3-columns,
 .wp-block-columns.has-2-columns {
 flex-direction:column !important;
 width:100% !important;
 }

 .wp-block-column {
 flex-basis:100% !important;
 width:100% !important;
 margin:0 !important;
 margin-bottom:15px !important;
 padding:0 !important;
 }

 .wp-block-columns.has-3-columns .wp-block-column {
 flex-basis:100% !important;
 width:100% !important;
 margin-bottom:15px !important;
 }

 h1.wp-block-heading{
 font-size:1.5rem !important;
 margin-top:30px !important;
 margin-bottom:15px !important;
 }

 h2.wp-block-heading{
 font-size:1.1rem !important;
 }

 .wp-block-button{
 width:auto !important;
 display:inline-block !important;
 margin:4px !important;
 }

 .wp-block-button__link{
 width:auto !important;
 padding:8px 12px !important;
 font-size:0.85rem !important;
 margin:0 !important;
 display:inline-block !important;
 white-space:nowrap !important;
 }

 /* Contenedores de botones centrados */
 div[style*="display"],
 [class*="download"],
 [class*="button-group"],
 .wp-block-buttons {
 text-align:center !important;
 display:flex !important;
 flex-wrap:wrap !important;
 justify-content:center !important;
 gap:8px !important;
 }

 .wp-block-paragraph{
 font-size:0.85rem !important;
 margin:0 10px !important;
 }

 /* YouTube videos - FULL WIDTH */
 .wp-block-html{
 margin:20px 0 !important;
 width:100% !important;
 padding:0 !important;
 box-sizing:border-box !important;
 position:relative !important;
 overflow:hidden !important;
 }

 .wp-block-html iframe{
 width:100% !important;
 max-width:100% !important;
 height:auto !important;
 aspect-ratio:3/2 !important;
 min-height:200px !important;
 display:block !important;
 border:none !important;
 }

 /* Ocultar TODO dentro del wp-block-html excepto iframe */
 .wp-block-html::before,
 .wp-block-html::after,
 .wp-block-html > *:not(iframe) {
 display:none !important;
 }

 /* Semi-transparent containers - FULL WIDTH */
 .wp-block-group[style*="rgba"],
 .wp-block-group[style*="0a0a0a"],
 .wp-block-group[style*="background"]{
 width:100vw !important;
 margin-left:calc(-50vw + 50%) !important;
 margin-right:calc(-50vw + 50%) !important;
 margin-top:15px !important;
 margin-bottom:15px !important;
 padding:15px 10px !important;
 box-sizing:border-box !important;
 position:relative !important;
 }

 /* Asegurar que contenido interior se vea bien */
 .wp-block-group[style*="rgba"] *,
 .wp-block-group[style*="0a0a0a"] * {
 max-width:calc(100vw - 20px) !important;
 overflow-x:hidden !important;
 }

 /* Fuerza TODOS los iframes a 100% width en pequeños móviles */
 iframe {
 width:100% !important;
 max-width:100% !important;
 height:auto !important;
 }

 /* Fuerza contenedores flexbox a columna */
 [style*="display: flex"],
 [style*="display:flex"] {
 flex-direction:column !important;
 width:100% !important;
 }

 /* Fuerza cualquier div contenedor a 100% width */
 div[style*="grid-template-columns"],
 div[style*="grid-template"] {
 grid-template-columns:1fr !important;
 }

 /* Grid de personajes en móvil pequeño */
 .personajes-grid{
 grid-template-columns:repeat(2,1fr) !important;
 gap:5px !important;
 }

 .wp-block-query{
 grid-template-columns:repeat(2,1fr) !important;
 width:calc(100% - 20px) !important;
 padding:0 10px !important;
 }

 .wp-block-columns{
 margin:0 10px !important;
 }
}

/* ===== ANIMACIONES AL SCROLL ===== */
@keyframes fadeInUp{
 from{
 opacity:0;
 transform:translateY(30px);
 }
 to{
 opacity:1;
 transform:translateY(0);
 }
}

.wp-block-group{
 animation:fadeInUp 0.6s ease-out;
}

/* ===== SOMBRAS Y EFECTOS ===== */
.wp-block-group[style*="rgba"]{
 box-shadow:0 0 20px rgba(255,215,0,0.1);
}

/* ===== FOOTER ===== */
.wp-block-template-part[slug="footer"]{
 border-top:2px solid rgba(255,215,0,0.2);
 background-color:#000;
 padding:60px 20px;
}

/* ===== COLORES DE TEXTO ===== */
[style*="color:#ffd700"]{
 color:var(--color-primary) !important;
}

[style*="color:#ff6b00"]{
 color:var(--color-orange) !important;
}

[style*="color:#b0b0b0"]{
 color:#b0b0b0 !important;
}

[style*="color:#999"]{
 color:var(--color-text-muted) !important;
}

/* ===== TRANSICIONES SUAVES ===== */
*{
 transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Contenedor principal y wrapper */
main, .wp-site-blocks, [class*="content"], [class*="container"]{
 max-width:100%;
 overflow-x:hidden;
 width:100%;
 box-sizing:border-box;
}

/* Forzar que imágenes y videos no se salgan del viewport */
img, video {
 max-width:100% !important;
}

.wp-block-embed {
 max-width:100% !important;
 width:100% !important;
}

.wp-block-embed iframe {
 width:100% !important;
 aspect-ratio:16/9;
}

/* Imágenes de contenido (posts, galería) ocupan ancho completo */
.wp-block-image img,
.wp-block-gallery img,
.blog-card-img img,
.post-thumbnail img,
.entry-content img,
.wp-block-post-featured-image img,
.blog-hero img,
.wp-block-cover img {
 width:100% !important;
 height:auto !important;
}

@media (max-width: 768px) {
 .wp-block-image,
 .wp-block-gallery,
 .blog-card-img,
 .post-thumbnail,
 .wp-block-post-featured-image,
 .blog-hero,
 .wp-block-cover {
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
 }

 .guia-galeria-destacada {
  width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
 }

 .guia-galeria-destacada > div {
  width:100% !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
 }

 .guia-galeria-destacada img {
  width:calc(25% - 3px) !important;
  min-width:calc(25% - 3px) !important;
  height:80px !important;
  flex-shrink:0 !important;
  object-fit:cover !important;
 }

 /* Mini reproductor no se sale del viewport */
 #orbe-mini-container {
  max-width:100vw !important;
  overflow:hidden !important;
 }

 #orbe-mini-container .orbe-mini {
  max-width:100vw !important;
 }

 /* Botón colapsado (nota musical) en móvil - solo posición */
 #orbe-mini-collapsed {
  bottom:10px !important;
  right:10px !important;
 }
}

/* Excepción: iframe del Orbe fullscreen necesita mantener height:100% */
#orbe-fullscreen-iframe,
#game-fullscreen-iframe {
 height:100% !important;
 width:100% !important;
 max-width:none !important;
}

/* ===== ORBE FULLSCREEN - ADAPTACIÓN MÓVIL (VERTICAL) ===== */
@media (max-width: 768px) {
 /* El modal flotante del orbe: ocupar toda la pantalla */
 #orbe-floating-window > div:nth-child(3) {
  width:100vw !important;
  height:100vh !important;
  max-height:100vh !important;
  top:0 !important;
  left:0 !important;
  transform:none !important;
  border-radius:0 !important;
  overflow:visible !important;
 }

 /* Overlay no debe bloquear interacción con el iframe */
 #orbe-overlay {
  pointer-events:none !important;
  display: none !important;
 }

 /* Asegurar que el iframe recibe los toques */
 #orbe-floating-window iframe,
 #orbe-floating-window #orbe-fullscreen-iframe {
  pointer-events:auto !important;
 }

 /* El div del botón X no debe tapar el iframe */
 #orbe-floating-window > div:nth-child(3) > div:first-child {
  width:auto !important;
  height:auto !important;
  pointer-events:none !important;
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  z-index:999999 !important;
 }

 #orbe-floating-window #closeOrbeFSModal {
  pointer-events:auto !important;
 }

 /* Botón X del orbe: subir para no tapar pestañas */
 #orbe-floating-window #closeOrbeFSModal {
  position:fixed !important;
  top:8px !important;
  right:8px !important;
  z-index:999999 !important;
  width:40px !important;
  height:40px !important;
  font-size:24px !important;
  padding:0 !important;
  pointer-events:auto !important;
  background:rgba(255, 68, 68, 0.95) !important;
  border:2px solid #ff6464 !important;
  color:white !important;
  border-radius:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
 }
}

button,a,.wp-block-button__link{
 transition:all 0.3s ease;
}

/* ===== SECCIÓN HERO PARALAX ===== */
.wp-block-group[style*="min-height:100vh"]{
 background-attachment:fixed;
 position:relative;
}

/* ===== TABLAS Y CONTENIDO ADICIONAL ===== */
.wp-block-image figure{
 margin:0;
}

.wp-block-image figcaption{
 text-align:center;
 color:var(--color-text-muted);
 margin-top:10px;
 font-size:0.9rem;
}

/* ===== BLOCKQUOTES ===== */
.wp-block-quote{
 border-left:4px solid var(--color-primary);
 padding-left:20px;
 color:var(--color-text-muted);
 font-style:italic;
}

/* ===== SEPARADORES ===== */
.wp-block-separator{
 border-color:rgba(255,215,0,0.2);
 border-top:2px solid rgba(255,215,0,0.2);
}

/* ===== GRID DE PERSONAJES - CENTRADO Y UNIFORME ===== */
.personajes-container{
 width:100% !important;
 max-width:100% !important;
 padding:0 50px !important;
 box-sizing:border-box !important;
 margin:0 !important;
 display:flex !important;
 justify-content:center !important;
}

.personajes-grid{
 display:grid !important;
 grid-template-columns:repeat(5,1fr) !important;
 gap:10px !important;
 width:100% !important;
 max-width:100% !important;
 padding:0 !important;
 margin:0 !important;
 box-sizing:border-box !important;
}

.personajes-grid li,
.personajes-grid .wp-block-group{
 background:rgba(20,20,50,0.5) !important;
 border:2px solid #333 !important;
 border-radius:8px !important;
 padding:10px !important;
 margin:0 !important;
 aspect-ratio:1 / 1 !important;
 display:flex !important;
 flex-direction:column !important;
 align-items:center !important;
 justify-content:center !important;
 box-sizing:border-box !important;
}

/* ===== REGLAS PARA CATEGORIA PERSONAJES - CENTRADO Y 5 COLUMNAS ===== */
.wp-block-query{
 display:grid !important;
 grid-template-columns:repeat(5,1fr) !important;
 column-gap:10px !important;
 row-gap:10px !important;
 width:calc(100% - 100px) !important;
 max-width:calc(100% - 100px) !important;
 padding:0 50px !important;
 margin:40px auto !important;
 box-sizing:border-box !important;
 align-items:start !important;
 align-content:start !important;
 margin-bottom:380px !important;
 gap:10px !important;
}

.wp-block-query.alignfull{
 display:grid !important;
 grid-template-columns:repeat(5,1fr) !important;
 column-gap:10px !important;
 row-gap:10px !important;
 width:calc(100% - 100px) !important;
 max-width:calc(100% - 100px) !important;
 padding:0 50px !important;
 margin:40px auto !important;
 gap:10px !important;
}

.wp-block-query .wp-block-group{
 align-items:start !important;
}
.wp-block-query .wp-block-post-template{
 display:contents !important;
}

.wp-block-query .wp-block-group{
 border:2px solid #333 !important;
 background-color:rgba(20,20,50,0.5) !important;
 padding:0 !important;
 border-radius:8px !important;
 display:flex !important;
 flex-direction:column !important;
 align-items:center !important;
 justify-content:space-around !important;
 aspect-ratio:1 !important;
 margin:0 !important;
 width:100% !important;
 box-sizing:border-box !important;
 overflow:hidden !important;
 margin-top:0 !important;
 margin-bottom:0 !important;
 margin-left:0 !important;
 margin-right:0 !important;
 padding-top:0 !important;
 padding-bottom:0 !important;
 padding-left:0 !important;
 padding-right:0 !important;
 align-self:start !important;
}

.wp-block-query .wp-block-group:not(:has(.wp-block-post-title)){
 display:none !important;
}

.wp-block-query .wp-block-post-featured-image{
 margin:0 !important;
 padding:0 !important;
 width:100% !important;
 height:255px !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 flex-shrink:0 !important;
}

.wp-block-query .wp-block-post-featured-image img{
 width:100% !important;
 height:100% !important;
 object-fit:cover !important;
 max-width:100% !important;
 max-height:100% !important;
}

.wp-block-query .wp-block-post-title{
 margin-top:0 !important;
 margin-bottom:0 !important;
 padding:5px 10px !important;
 font-size:1.9rem !important;
 color:#ffd700 !important;
 line-height:1.2 !important;
 word-wrap:break-word !important;
 width:100% !important;
 text-align:center !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
}

/* Ajustes para el título de página Personajes */main h1,
h1.wp-block-heading{
 margin-top:80px !important;
 margin-bottom:40px !important;
 text-align:center !important;
 display:block !important;
 width:100% !important;
}

/* ===== PERFIL DE JUGADOR ===== */
.quintaesencia-player{
 position:relative !important;
 z-index:1 !important;
 max-width:1100px !important;
 margin:0 auto 60px !important;
 padding:20px !important;
}

/* Header del Jugador */
.player-header{
 background:transparent;
 border:none;
 border-radius:12px;
 padding:30px;
 margin-bottom:30px;
 box-shadow:none;
 position:relative !important;
}

.player-header-content{
 display:flex;
 gap:25px;
 align-items:center;
 flex-wrap:wrap;
 margin-top:200px !important;
}

.player-avatar{
 flex-shrink:0;
 position:absolute !important;
 top:-170px !important;
 left:30px !important;
}

.player-avatar img,
.player-avatar-img{
 width:100px;
 height:100px;
 border-radius:50%;
 border:3px solid var(--color-primary);
 box-shadow:0 0 30px rgba(255,215,0,0.4);
 background:rgba(0,0,0,0.3);
 object-fit:cover;
}

.player-info{
 flex:1;
}

.player-info h1{
 color:var(--color-primary);
 font-size:3rem;
 margin:0 0 12px 0;
 text-transform:uppercase;
 letter-spacing:2px;
 font-weight:900;
 text-shadow:0 0 20px rgba(255,215,0,0.5),0 2px 10px rgba(0,0,0,0.5);
 text-align:center;
}

.player-email{
 color:var(--color-text-muted);
 font-size:1rem;
 margin-bottom:25px;
 letter-spacing:0.5px;
 text-align:center;
}

.player-stats{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:20px;
 margin-top:20px;
}

.stat{
 background:linear-gradient(135deg,rgba(255,215,0,0.08) 0%,rgba(255,215,0,0.02) 100%);
 border:2px solid rgba(255,215,0,0.25);
 border-radius:12px;
 padding:20px 15px;
 text-align:center;
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
}

.stat::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:2px;
 background:linear-gradient(90deg,transparent,var(--color-primary),transparent);
}

.stat:hover{
 background:linear-gradient(135deg,rgba(255,215,0,0.12) 0%,rgba(255,215,0,0.04) 100%);
 border-color:rgba(255,215,0,0.4);
 box-shadow:0 0 20px rgba(255,215,0,0.15);
 transform:translateY(-3px);
}

.stat-label{
 display:block;
 color:var(--color-text-muted);
 font-size:0.85rem;
 margin-bottom:10px;
 text-transform:uppercase;
 letter-spacing:1px;
 font-weight:600;
}

.stat-value{
 display:block;
 color:var(--color-primary);
 font-size:2.2rem;
 font-weight:900;
}

.stat-points{
 color:#ffed4e !important;
}

/* Tabs Navigation */
.profile-tabs{
 margin-top:40px;
}

.tabs-navigation{
 display:flex;
 gap:10px;
 border-bottom:2px solid rgba(255,215,0,0.2);
 margin-bottom:30px;
 overflow-x:auto;
 padding:0 0 15px 0;
}

.tab-button{
 background:transparent;
 border:none;
 color:var(--color-text-muted);
 font-size:1rem;
 padding:10px 20px;
 cursor:pointer;
 transition:all 0.3s ease;
 border-bottom:3px solid transparent;
 white-space:nowrap;
}

.tab-button:hover{
 color:var(--color-primary);
 background:rgba(255,215,0,0.05);
}

.tab-button.active{
 color:var(--color-primary);
 border-bottom-color:var(--color-primary);
 background:rgba(255,215,0,0.1);
}

/* Tab Content */
.tab-content{
 display:none;
 animation:fadeInUp 0.3s ease-out;
}

.tab-content.active{
 display:block;
}

.tab-content h2{
 color:var(--color-primary);
 margin-bottom:30px;
 border-bottom:2px solid var(--color-primary);
 padding-bottom:15px;
 text-transform:uppercase;
 letter-spacing:1px;
}

/* Posts Grid */
.posts-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 gap:20px;
 margin-bottom:30px;
}

.post-card{
 background:rgba(20,20,50,0.4);
 border:2px solid rgba(255,215,0,0.2);
 border-radius:10px;
 overflow:hidden;
 transition:all 0.3s ease;
 display:flex;
 flex-direction:column;
}

.post-card:hover{
 border-color:var(--color-primary);
 box-shadow:0 0 30px rgba(255,215,0,0.3);
 transform:translateY(-5px);
}

.post-thumbnail{
 width:100%;
 overflow:hidden;
 background:rgba(0,0,0,0.7);
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:8px 8px 0 0;
}

.post-thumbnail a{
 display:block;
 width:100%;
 height:100%;
}

.post-thumbnail-img{
 width:100%;
 height:auto;
 display:block;
 transition:transform 0.3s ease;
}

.post-card:hover .post-thumbnail img{
 transform:scale(1.05);
}

.post-content{
 padding:20px;
 flex-grow:1;
 display:flex;
 flex-direction:column;
}

.post-content h3{
 margin:0 0 10px 0;
 color:var(--color-primary);
}

.post-content h3 a{
 color:var(--color-primary);
 text-decoration:none;
 transition:all 0.3s ease;
}

.post-content h3 a:hover{
 color:#ffb700;
 text-shadow:0 0 10px rgba(255,215,0,0.5);
}

.post-date{
 color:var(--color-text-muted);
 font-size:0.9rem;
 margin:0 0 15px 0;
}

.post-excerpt{
 color:var(--color-text);
 flex-grow:1;
 margin:0 0 15px 0;
}

.read-more{
 color:var(--color-primary);
 text-decoration:none;
 transition:all 0.3s ease;
 align-self:flex-start;
}

.read-more:hover{
 color:#ffb700;
}

/* Comments List */
.comments-list{
 display:flex;
 flex-direction:column;
 gap:20px;
}

.comment-item{
 background:rgba(20,20,50,0.4);
 border-left:3px solid var(--color-primary);
 border-radius:8px;
 padding:20px;
}

.comment-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 margin-bottom:15px;
}

.comment-header h4{
 margin:0;
 color:var(--color-primary);
 flex-grow:1;
}

.comment-header h4 a{
 color:var(--color-primary);
 text-decoration:none;
}

.comment-header h4 a:hover{
 color:#ffb700;
}

.comment-date{
 color:var(--color-text-muted);
 font-size:0.9rem;
 white-space:nowrap;
 margin-left:20px;
}

.comment-body{
 color:var(--color-text);
 line-height:1.6;
}

.comment-actions{
 margin-top:15px;
 padding-top:15px;
 border-top:1px solid rgba(255,215,0,0.1);
}

.comment-link{
 color:var(--color-primary);
 text-decoration:none;
 font-size:0.9rem;
 transition:all 0.3s ease;
}

.comment-link:hover{
 color:#ffb700;
 text-shadow:0 0 10px rgba(255,215,0,0.5);
}

.comment-post-link{
 color:var(--color-primary);
 text-decoration:none;
 transition:all 0.3s ease;
}

.comment-post-link:hover{
 color:#ffb700;
 text-decoration:underline;
}

/* Forum List */
.forum-list{
 display:flex;
 flex-direction:column;
 gap:15px;
}

.forum-item{
 background:rgba(20,20,50,0.4);
 border:1px solid rgba(255,215,0,0.2);
 border-left:3px solid var(--color-primary);
 border-radius:8px;
 padding:20px;
 transition:all 0.3s ease;
}

.forum-item:hover{
 box-shadow:0 0 20px rgba(255,215,0,0.2);
 border-color:var(--color-primary);
}

.forum-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:20px;
 margin-bottom:10px;
}

.forum-header h4{
 margin:0;
 color:var(--color-primary);
 flex-grow:1;
}

.forum-header h4 a{
 color:var(--color-primary);
 text-decoration:none;
}

.forum-header h4 a:hover{
 color:#ffb700;
}

.forum-category{
 background:rgba(255,215,0,0.1);
 color:var(--color-primary);
 padding:5px 12px;
 border-radius:20px;
 font-size:0.85rem;
 white-space:nowrap;
}

.forum-meta{
 display:flex;
 gap:20px;
 color:var(--color-text-muted);
 font-size:0.9rem;
}

/* Points Container */
.points-container{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:30px;
 margin-bottom:30px;
}

.points-total,
.points-breakdown{
 background:rgba(20,20,50,0.4);
 border:2px solid rgba(255,215,0,0.2);
 border-radius:10px;
 padding:30px;
}

.points-total h3,
.points-breakdown h3{
 color:var(--color-primary);
 margin-top:0;
 margin-bottom:20px;
 border-bottom:2px solid var(--color-primary);
 padding-bottom:10px;
}

.points-display{
 display:flex;
 align-items:baseline;
 gap:10px;
 margin:30px 0;
}

.points-number{
 font-size:3.5rem;
 color:var(--color-primary);
 font-weight:bold;
}

.points-label{
 color:var(--color-text-muted);
 font-size:1.2rem;
}

.points-ranking{
 color:var(--color-text-muted);
 margin:20px 0 0 0;
 font-size:0.95rem;
}

.breakdown-items{
 display:flex;
 flex-direction:column;
 gap:15px;
}

.breakdown-item{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:15px;
 background:rgba(255,215,0,0.05);
 border:1px solid rgba(255,215,0,0.2);
 border-radius:8px;
}

.breakdown-label{
 color:var(--color-text);
}

.breakdown-value{
 color:var(--color-primary);
 font-weight:bold;
}

/* Points History */
.points-history{
 background:rgba(20,20,50,0.4);
 border:2px solid rgba(255,215,0,0.2);
 border-radius:10px;
 padding:30px;
}

.points-history h3{
 color:var(--color-primary);
 margin-top:0;
 margin-bottom:20px;
 border-bottom:2px solid var(--color-primary);
 padding-bottom:10px;
}

.history-items{
 display:flex;
 flex-direction:column;
 gap:10px;
 max-height:400px;
 overflow-y:auto;
}

.history-item{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:12px;
 background:rgba(0,0,0,0.3);
 border-radius:6px;
 font-size:0.9rem;
}

.history-reason{
 color:var(--color-text);
 flex-grow:1;
}

.history-date{
 color:var(--color-text-muted);
 margin:0 20px;
}

.history-points{
 color:#ffb700;
 font-weight:bold;
}

/* Profile Details */
.profile-details{
 display:grid;
 grid-template-columns:1fr;
 gap:15px;
}

.detail-item{
 background:rgba(20,20,50,0.4);
 border:1px solid rgba(255,215,0,0.2);
 border-radius:8px;
 padding:20px;
}

.detail-item label{
 display:block;
 color:var(--color-primary);
 font-weight:bold;
 margin-bottom:10px;
 text-transform:uppercase;
 font-size:0.9rem;
}

.detail-item p{
 margin:0;
 color:var(--color-text);
}

.no-content{
 text-align:center;
 color:var(--color-text-muted);
 padding:40px 20px;
 background:rgba(20,20,50,0.3);
 border-radius:8px;
 border:1px solid rgba(255,215,0,0.1);
}

/* Responsive */
@media (max-width:1200px){
 .quintaesencia-player{
  max-width:95%;
 }

 .points-container{
  grid-template-columns:1fr;
 }

 .posts-grid{
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
 }
}

@media (max-width:1024px){
 .player-header-content{
  flex-direction:column;
  text-align:center;
 }

 .player-info h1{
  font-size:1.8rem;
 }

 .player-stats{
  grid-template-columns:repeat(2,1fr);
  width:100%;
 }

 .profile-details{
  grid-template-columns:1fr;
 }

 .tabs-navigation{
  flex-wrap:wrap;
  gap:5px;
 }

 .tab-button{
  padding:8px 12px;
  font-size:0.85rem;
  flex:1;
  min-width:100px;
 }
}

@media (max-width:768px){
 .quintaesencia-player{
  margin:40px auto;
  padding:15px;
 }

 .player-header{
  padding:20px;
  margin-bottom:20px;
 }

 .player-header-content{
  flex-direction:column;
  text-align:center;
  gap:15px;
 }

 .player-info h1{
  font-size:1.5rem;
  margin-bottom:5px;
 }

 .player-email{
  font-size:0.85rem;
 }

 .player-avatar img{
  width:80px;
  height:80px;
 }

 .player-stats{
  grid-template-columns:repeat(2,1fr);
  gap:10px;
 }

 .stat{
  padding:10px;
 }

 .stat-value{
  font-size:1.4rem;
 }

 .tabs-navigation{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  gap:0;
  margin-bottom:20px;
  padding:0 0 10px 0;
 }

 .tab-button{
  padding:10px;
  font-size:0.75rem;
  flex:0 0 auto;
  min-width:80px;
  border-bottom:none;
  border-top:3px solid transparent;
 }

 .tab-button.active{
  border-top-color:var(--color-primary);
  border-bottom:none;
 }

 .tab-content h2{
  font-size:1.3rem;
  margin-bottom:20px;
 }

 .posts-grid{
  grid-template-columns:1fr;
  gap:15px;
 }

 .post-card{
  flex-direction:row;
 }

 .post-thumbnail{
  width:120px;
  height:120px;
  flex-shrink:0;
 }

 .post-content{
  padding:15px;
 }

 .post-content h3{
  font-size:1rem;
  margin-bottom:8px;
 }

 .comment-header{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
 }

 .comment-date{
  margin-left:0;
  font-size:0.8rem;
 }

 .forum-header{
  flex-direction:column;
  gap:10px;
 }

 .forum-category{
  font-size:0.75rem;
  padding:4px 8px;
 }

 .forum-meta{
  gap:10px;
  font-size:0.8rem;
 }

 .points-total,
 .points-breakdown{
  padding:20px;
 }

 .points-number{
  font-size:2.5rem;
 }

 .profile-details{
  grid-template-columns:1fr;
 }

 .detail-item{
  padding:15px;
 }

 .detail-item label{
  font-size:0.85rem;
 }
}

@media (max-width:480px){
 .quintaesencia-player{
  margin:20px auto;
  padding:10px;
 }

 .player-header{
  padding:15px;
 }

 .player-info h1{
  font-size:1.3rem;
 }

 .stat{
  padding:8px;
 }

 .stat-label{
  font-size:0.8rem;
 }

 .stat-value{
  font-size:1.2rem;
 }

 .tab-button{
  min-width:60px;
  padding:8px;
  font-size:0.7rem;
 }

 .posts-grid{
  grid-template-columns:1fr;
 }

 .post-card{
  flex-direction:column;
 }

 .post-thumbnail{
  width:100%;
  height:150px;
 }

 .points-number{
  font-size:2rem;
 }
}

/* YouTube Video Play Button - Compact Style */
.youtube-video div[style*="position:absolute"]{
 width:60px !important;
 height:60px !important;
 max-width:60px !important;
 max-height:60px !important;
 font-size:18px !important;
 border-radius:50% !important;
 background:rgba(255,0,0,0.85) !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 aspect-ratio:1/1 !important;
}

.youtube-video img {
 width:100% !important;
 height:auto !important;
 border-radius:0 !important;
}

/* Cache bust v2 */