:root {
  --lego-bg: #12101a;
  --lego-panel: #1f1a26;
  --lego-panel-soft: #29212f;
  --lego-panel-strong: #141018;
  --lego-text: #f3eff7;
  --lego-muted: #a89fc0;
  --lego-border: rgba(255, 255, 255, 0.08);
  --lego-accent: #f3c600;
  --lego-accent-2: #ff4b40;
  --lego-blue: #4ab0ff;
  --lego-green: #2ac87a;
}

body,
body.dark-theme,
body.light-theme {
  background: var(--lego-bg) !important;
  color: var(--lego-text) !important;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.06) 6px, transparent 7px), radial-gradient(circle at 44px 44px, rgba(255, 255, 255, 0.03) 6px, transparent 7px);
  background-size: 56px 56px;
  opacity: 0.2;
}

.lego-header,
.header_in.element_to_stick {
  position: relative;
  background: rgba(20, 17, 24, 0.96) !important;
  border-bottom: 4px solid rgba(243, 198, 0, 0.16);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.18);
}

/* --- TEXTURA 3D DE PLACA BASE DE LEGO PARA EL HEADER --- */
.lego-header::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Capas de degradado para simular el volumen del "stud" (relieve) */
  background-image:
    /* 1. Brillo (luz desde arriba a la izquierda) */
    radial-gradient(circle at 9px 9px, rgba(255, 255, 255, 0.12) 0%, transparent 12%),
    /* 2. Sombra (volumen hacia abajo a la derecha) */
    radial-gradient(circle at 13px 13px, rgba(0, 0, 0, 0.8) 0%, transparent 15%),
    /* 3. Base cilíndrica del stud */
    radial-gradient(circle at 11px 11px, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 10%, transparent 11%);
  /* Tamaño de la cuadrícula más cerrado, como una placa real */
  background-size: 22px 22px;
  opacity: 0.9;
  pointer-events: none;
}

.lego-logo {
  display: inline-block;
  background: linear-gradient(180deg, #f8f0c1 0%, #e4d58e 100%);
  padding: 8px;
  border: 6px solid #1d1822;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.18);
}

.lego-logo img {
  display: block;
  height: 90px;
  width: auto;
  image-rendering: pixelated;
}

.main-menu ul li a {
  display: inline-block;
  background: linear-gradient(180deg, #27202f 0%, #1b1522 100%);
  padding: 10px 18px;
  margin-right: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  font-weight: 700;
  color: var(--lego-text) !important;
  text-decoration: none !important;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus,
.main-menu ul li a.active {
  background: linear-gradient(180deg, var(--lego-accent), #d3a002) !important;
  color: #15120d !important;
  transform: translateY(-3px);
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.16);
}

.lego-bricks,
.lego-page-decor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.lego-brick,
.lego-decor {
  position: absolute;
  width: 112px;
  height: 54px;
  border-radius: 10px;
  border: 3px solid rgba(0, 0, 0, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 24%), var(--lego-brick-color);
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.14), 0 10px 0 rgba(0, 0, 0, 0.18), 0 18px 30px rgba(0, 0, 0, 0.22);
  transform-origin: center;
  overflow: visible;
}

/* --- STUDS PARA LOS LADRILLOS DEL HEADER --- */
.lego-brick::before,
.lego-decor::before {
  content: '';
  position: absolute;
  top: -10px;
  /* Se asienta directamente sobre el bloque */
  left: 10px;
  width: 90px;
  height: 14px;
  border-radius: 0;
  border: none !important;
  /* Quitamos el borde contenedor */
  box-shadow: none !important;
  /* Quitamos la sombra de la caja */
  background-color: transparent;

  /* Dibujamos 4 studs individuales con relieve 3D */
  background-image:
    /* Stud 1 */
    radial-gradient(circle at 12px 7px, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 12px 7px, var(--lego-brick-color) 0%, var(--lego-brick-color) 35%, rgba(0, 0, 0, 0.4) 50%, transparent 55%),
    /* Stud 2 */
    radial-gradient(circle at 34px 7px, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 34px 7px, var(--lego-brick-color) 0%, var(--lego-brick-color) 35%, rgba(0, 0, 0, 0.4) 50%, transparent 55%),
    /* Stud 3 */
    radial-gradient(circle at 56px 7px, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 56px 7px, var(--lego-brick-color) 0%, var(--lego-brick-color) 35%, rgba(0, 0, 0, 0.4) 50%, transparent 55%),
    /* Stud 4 */
    radial-gradient(circle at 78px 7px, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 78px 7px, var(--lego-brick-color) 0%, var(--lego-brick-color) 35%, rgba(0, 0, 0, 0.4) 50%, transparent 55%);
  background-repeat: no-repeat;
}

.lego-brick::after,
.lego-decor::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 12px;
  width: calc(100% - 24px);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(0.2px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28);
}

.lego-brick.red,
.lego-decor.red {
  --lego-brick-color: #e34242;
}

.lego-brick.yellow,
.lego-decor.yellow {
  --lego-brick-color: #f3c600;
}

.lego-brick.blue,
.lego-decor.blue {
  --lego-brick-color: #4aa7ff;
}

.lego-brick.green,
.lego-decor.green {
  --lego-brick-color: #2ac87a;
}

@keyframes floatBrick {
  0% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-10px) rotate(4deg);
  }

  100% {
    transform: translateY(0) rotate(-2deg);
  }
}

@keyframes floatLego {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(8deg);
  }
}

.lego-brick {
  animation: floatBrick 4.2s ease-in-out infinite;
}

.lego-decor {
  animation: floatLego 7s ease-in-out infinite;
  opacity: 0.75;
}

.lego-page-decor .lego-decor {
  width: 60px;
  height: 34px;
}

.lego-page-decor .lego-decor:nth-child(1) {
  left: 8%;
  top: 26%;
  animation-delay: 0.1s;
}

.lego-page-decor .lego-decor:nth-child(2) {
  left: 22%;
  top: 55%;
  animation-delay: 0.6s;
}

.lego-page-decor .lego-decor:nth-child(3) {
  left: 74%;
  top: 15%;
  animation-delay: 1.2s;
}

.lego-page-decor .lego-decor:nth-child(4) {
  left: 80%;
  top: 72%;
  animation-delay: 0.4s;
}

.lego-page-decor .lego-decor::after {
  width: 14px;
  height: 14px;
  left: 8px;
  top: -7px;
}

.btn_1,
.btn_1.gradient,
.btn_1.medium,
.btn_1.gray {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 18px;
  border: 4px solid rgba(0, 0, 0, 0.28);
  background: linear-gradient(180deg, var(--lego-accent) 0%, #d8a100 100%) !important;
  color: #18120c !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 9px 0 #16100a, 0 16px 28px rgba(0, 0, 0, 0.18);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* --- STUDS PARA LOS BOTONES --- */
.btn_1::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  /* Los centra automáticamente */
  width: 80px;
  height: 12px;
  border-radius: 0;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent;

  /* Dibujamos 4 studs del color principal del botón */
  background-image:
    /* Stud 1 */
    radial-gradient(circle at 10px 6px, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 20%, transparent 25%),
    radial-gradient(circle at 10px 6px, var(--lego-accent) 0%, var(--lego-accent) 40%, rgba(0, 0, 0, 0.3) 55%, transparent 60%),
    /* Stud 2 */
    radial-gradient(circle at 30px 6px, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 20%, transparent 25%),
    radial-gradient(circle at 30px 6px, var(--lego-accent) 0%, var(--lego-accent) 40%, rgba(0, 0, 0, 0.3) 55%, transparent 60%),
    /* Stud 3 */
    radial-gradient(circle at 50px 6px, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 20%, transparent 25%),
    radial-gradient(circle at 50px 6px, var(--lego-accent) 0%, var(--lego-accent) 40%, rgba(0, 0, 0, 0.3) 55%, transparent 60%),
    /* Stud 4 */
    radial-gradient(circle at 70px 6px, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 20%, transparent 25%),
    radial-gradient(circle at 70px 6px, var(--lego-accent) 0%, var(--lego-accent) 40%, rgba(0, 0, 0, 0.3) 55%, transparent 60%);
  background-repeat: no-repeat;
}

.btn_1::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 18px;
  width: calc(100% - 36px);
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(0.18px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.34);
}

/* --- EFECTO HOVER (Al pasar el mouse) --- */
.btn_1:hover,
.btn_1:focus {
  /* Se eleva un milímetro y brilla más, invitando al clic */
  transform: translateY(-1px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 10px 0 #16100a, 0 14px 25px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
  /* Resalta el color como plástico brillante */
}

/* --- EFECTO ACTIVE (Al hacer clic / encajar la pieza) --- */
.btn_1:active {
  /* El botón baja bruscamente, simulando que encaja en la placa base */
  transform: translateY(6px);
  /* La gruesa sombra 3D inferior se comprime casi por completo */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 3px 0 #16100a, 0 4px 10px rgba(0, 0, 0, 0.4);
}

main {
  position: relative;
  z-index: 1;
}

.lego-page-decor {
  z-index: 0;
}

.main_title span em {
  background: linear-gradient(90deg, var(--lego-accent), var(--lego-accent-2));
}

.bg_gray,
.banner,
.strip,
footer,
.author_list .author,
.main_title.version_2,
.author_list a.author {
  background: var(--lego-panel) !important;
  color: var(--lego-text) !important;
  border-color: var(--lego-border) !important;
}

.bg_gray {
  background: linear-gradient(180deg, #201b27 0%, #2b2536 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.bg_gray.pattern {
  background: linear-gradient(180deg, #201b27 0%, #2b2536 100%) no-repeat center center !important;
}

.bg_gray h2,
.bg_gray p,
.bg_gray ul li h3,
.bg_gray ul li p {
  color: rgba(243, 239, 247, 0.96) !important;
}

.how_2 ul li h3 {
  color: #ffffff !important;
}

.how_2 ul li p {
  color: rgba(243, 239, 247, 0.92) !important;
}

.owl-slide.cover {
  background-color: transparent !important;
}

.owl-slide.cover .opacity-mask {
  background-color: rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(1.5px);
}

.bg_gray.pattern {
  background: linear-gradient(180deg, #201b27 0%, #2b2536 100%) no-repeat center center !important;
}

.strip {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

.strip>figure {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.strip>figure .item_title {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.8) 100%) !important;
}

.strip>figure .item_title h3,
.strip>figure .item_title small {
  color: #f8f5fb !important;
}

.strip ul li h6,
.strip ul li a.author h6 {
  color: #f1ecf5 !important;
}

.author_list a.author {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.12);
  transition: transform .25s ease, background .25s ease;
}

.author_list a.author:hover {
  transform: translateY(-5px);
}

.strip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

.strip figure {
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}

.strip .strip_info {
  background: transparent !important;
}

footer {
  background: #17131b !important;
  color: var(--lego-muted) !important;
}

footer h3,
footer a {
  color: var(--lego-text) !important;
}

footer .links ul li a:hover,
footer .additional_links li a:hover {
  color: var(--lego-accent) !important;
}

.text-center.white,
.white,
.main_title h2,
.main_title p,
.owl-slide-title,
.owl-slide-subtitle,
.author_list h6,
.author_list span,
.strip .item_title h3,
.strip .author h6 {
  color: var(--lego-text) !important;
}

body.dark-theme .bg_gray,
body.dark-theme .banner,
body.dark-theme .strip,
body.dark-theme .box_pricing,
body.dark-theme .plan,
body.dark-theme .form-control,
body.dark-theme .nice-select,
body.dark-theme .main_title,
body.dark-theme .author_list .author,
body.dark-theme footer,
body.dark-theme .container,
body.dark-theme .main_title.version_2 {
  background-color: var(--lego-panel) !important;
  color: var(--lego-text) !important;
}

body.dark-theme .strip figure,
body.dark-theme .strip .strip_info,
body.dark-theme .box_grid .info_panel {
  background: transparent !important;
  color: var(--lego-text) !important;
}

body.dark-theme .main-menu ul li a,
body.dark-theme .main-menu ul li a:hover,
body.dark-theme .main-menu ul li a:focus,
body.dark-theme .main-menu ul li a.active {
  background: linear-gradient(180deg, #19121d 0%, #2d2232 100%) !important;
  color: var(--lego-text) !important;
}

body.dark-theme .main-menu ul li a:hover,
body.dark-theme .main-menu ul li a:focus,
body.dark-theme .main-menu ul li a.active {
  background: linear-gradient(180deg, var(--lego-accent), #d3a002) !important;
  color: #15120d !important;
}

@media (max-width: 991px) {
  .lego-logo img {
    height: 58px;
  }

  .lego-bricks,
  .lego-page-decor {
    display: none;
  }

  .main-menu {
    display: none !important;
  }
}

/* =========================================================
   DISEÑO LOCO: FOOTER ESTILO LEGO & PIXEL ART
========================================================= */

/* 1. Fondo del Footer y Borde de Colores Lego */
footer {
  background: #0d0a11 !important;
  /* Un fondo un poco más oscuro para que resalten los colores */
  position: relative;
  border-top: 4px solid #000;
  margin-top: 20px;
  z-index: 10;
}

/* Esta es la tira de colores "ensamblados" en la parte superior del footer */
footer::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  background: repeating-linear-gradient(to right,
      var(--lego-red) 0%, var(--lego-red) 25%,
      var(--lego-yellow) 25%, var(--lego-yellow) 50%,
      var(--lego-blue) 50%, var(--lego-blue) 75%,
      var(--lego-green) 75%, var(--lego-green) 100%);
  background-size: 160px 100%;
  /* Cada bloque de color mide 40px */
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* 2. Títulos del Footer (Efecto Bloque 3D) */
footer h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Sombra sólida desplazada para efecto 3D / Pixel */
  text-shadow: 3px 3px 0px var(--lego-blue), 4px 4px 0px #000 !important;
  margin-bottom: 25px;
}

/* 3. Links del Footer (Animación Pixelada) */
footer .links ul li a {
  position: relative;
  display: inline-block;
  color: var(--lego-text) !important;
  font-weight: 500;
  transition: all 0.2s steps(4);
  /* Animación a "saltos" (stepped) tipo videojuego retro */
}

/* Efecto al pasar el mouse por los links */
footer .links ul li a:hover {
  color: var(--lego-yellow) !important;
  transform: translateX(8px);
  /* Se mueve un poco a la derecha */
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8) !important;
}

/* Línea divisoria inferior */
footer hr {
  border-color: rgba(255, 255, 255, 0.1);
  border-top: 3px dashed rgba(255, 255, 255, 0.15);
  /* Línea punteada tipo guía de ensamble */
}


/* =========================================================
   EL BOTÓN "IR ARRIBA" (Pieza de Lego 2x2 Roja)
========================================================= */

#toTop {
  width: 50px !important;
  height: 50px !important;
  background-color: var(--lego-red) !important;
  border-radius: 2px !important;
  /* Esquinas casi rectas */
  border: 3px solid rgba(0, 0, 0, 0.4) !important;

  /* Efecto de grosor de la pieza */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 6px 0 #8b0000,
    /* Sombra inferior gruesa roja oscura */
    0 10px 15px rgba(0, 0, 0, 0.5) !important;

  bottom: 30px !important;
  right: 30px !important;
  transition: all 0.1s ease-out !important;
  z-index: 9999;

  /* Dibujamos los 4 "Studs" (cilindros) en el botón */
  background-image:
    /* Stud 1 (Arriba Izquierda) */
    radial-gradient(circle at 14px 14px, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 14px 14px, var(--lego-red) 0%, var(--lego-red) 30%, rgba(0, 0, 0, 0.4) 45%, transparent 50%),
    /* Stud 2 (Arriba Derecha) */
    radial-gradient(circle at 36px 14px, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 36px 14px, var(--lego-red) 0%, var(--lego-red) 30%, rgba(0, 0, 0, 0.4) 45%, transparent 50%),
    /* Stud 3 (Abajo Izquierda) */
    radial-gradient(circle at 14px 36px, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 14px 36px, var(--lego-red) 0%, var(--lego-red) 30%, rgba(0, 0, 0, 0.4) 45%, transparent 50%),
    /* Stud 4 (Abajo Derecha) */
    radial-gradient(circle at 36px 36px, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 15%, transparent 20%),
    radial-gradient(circle at 36px 36px, var(--lego-red) 0%, var(--lego-red) 30%, rgba(0, 0, 0, 0.4) 45%, transparent 50%);
  background-repeat: no-repeat !important;
}

/* Modificamos la flecha del botón para que parezca de videojuego */
#toTop::after {
  content: '↑' !important;
  font-family: 'Courier New', Courier, monospace !important;
  /* Fuente de sistema/pixelada */
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6) !important;
  z-index: 2;
}

/* Al pasar el mouse por encima (Iluminación) */
#toTop:hover {
  transform: translateY(2px);
  background-color: #ff3b3b !important;
  /* Rojo más brillante */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 4px 0 #8b0000,
    0 6px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Al hacer clic (Hundir la pieza de Lego) */
#toTop:active {
  transform: translateY(6px);
  /* El botón baja */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    0 0px 0 #8b0000,
    /* La sombra desaparece simulando presión */
    0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

/* =========================================================
   NUEVO DISEÑO UNIFORME CAOZ PIX
   (Controlado por la clase maestra 'caoz-theme-unificado')
========================================================= */

/* 1. LIMPIEZA DE "PARCHES" VISUALES EN TÍTULOS */
/* Quitamos el fondo feo detrás de los títulos (visible en "Nuevas Obras") */
body.caoz-theme-unificado .main_title,
body.caoz-theme-unificado .main_title.version_2 {
  background: transparent !important;
  border: none !important;
}

/* 2. UNIFICACIÓN DE LAS SECCIONES GRISES (.bg_gray) */
/* En lugar de colores sólidos que tapan la textura Lego, usamos un cristal oscuro */
body.caoz-theme-unificado .bg_gray {
  background: rgba(18, 14, 22, 0.65) !important;
  /* Translúcido para ver la textura del fondo */
  backdrop-filter: blur(5px) !important;
  /* Efecto vidrio ahumado elegante */
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 3. AJUSTE DEL CARRUSEL PRINCIPAL (Hero) */
/* Oscurecemos solo lo suficiente la máscara para leer el texto, sin tapar la foto */
body.caoz-theme-unificado .owl-slide .opacity-mask {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 4. TARJETAS DE ARTISTAS */
/* Les damos un fondo oscuro sólido para que destaquen sobre la nueva transparencia */
body.caoz-theme-unificado .author_list a.author {
  background: rgba(25, 20, 30, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  /* Estilo bloque */
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3) !important;
}

/* 5. TARJETAS DE OBRAS (Strip) */
body.caoz-theme-unificado .strip {
  background: rgba(255, 255, 255, 0.03) !important;
  /* Ligero brillo */
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* 6. CORRECCIÓN DEL COLOR DE TEXTO EN SECCIONES LIMPIAS */
/* Aseguramos que los textos de las listas (como la sección NFC) se lean bien */
body.caoz-theme-unificado .how_2 ul li p {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.caoz-theme-unificado .filters_full {
  background: rgba(22, 16, 25, 0.85) !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
  border-radius: 14px !important;
  padding: 20px 0 18px !important;
}

body.caoz-theme-unificado .filters_full .form-control,
body.caoz-theme-unificado .filters_full .custom_select select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f3eff7 !important;
}

body.caoz-theme-unificado .filters_full .form-control::placeholder {
  color: rgba(243, 239, 247, 0.6) !important;
}

body.caoz-theme-unificado .filters_full .btn_filters,
body.caoz-theme-unificado .filters_full .btn_1 {
  border-radius: 6px !important;
  border: 3px solid rgba(0, 0, 0, 0.25) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 8px 0 rgba(0, 0, 0, 0.22) !important;
}

body.caoz-theme-unificado .page_header {
  background: rgba(15, 11, 18, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.16) !important;
  padding: 26px 28px !important;
  margin-bottom: 30px !important;
}

body.caoz-theme-unificado .page_header h1,
body.caoz-theme-unificado .page_header span {
  color: #f3eff7 !important;
}

/* =========================================================
   ESTILO LEGO PARA OBRA.PHP
========================================================= */
body.caoz-theme-unificado .obra-detail-page {
  background: radial-gradient(circle at top left, rgba(243,198,0,0.08), transparent 18%),
              linear-gradient(180deg, rgba(5,5,10,0.96) 0%, rgba(12,11,20,0.99) 100%);
  position: relative;
}

body.caoz-theme-unificado .obra-detail-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 18px 18px, rgba(255,255,255,0.06) 4px, transparent 4.5px),
                    radial-gradient(circle at 64px 64px, rgba(255,255,255,0.04) 4px, transparent 4.5px);
  background-size: 86px 86px;
  opacity: 0.2;
  pointer-events: none;
}

body.caoz-theme-unificado .obra-detail-page .box_general.obra-card,
body.caoz-theme-unificado .obra-detail-page .box_general.obra-gallery,
body.caoz-theme-unificado .obra-detail-page .box_bid.obra-sidebar {
  background: rgba(18, 15, 24, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
  border-radius: 18px !important;
}

body.caoz-theme-unificado .obra-detail-page .obra-card {
  padding: 26px !important;
}

body.caoz-theme-unificado .obra-detail-page h2,
body.caoz-theme-unificado .obra-detail-page h4,
body.caoz-theme-unificado .obra-detail-page .obra-section-title {
  color: #f3f0dd !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  margin-bottom: 0.75rem !important;
}

body.caoz-theme-unificado .obra-detail-page .gallery-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(243, 198, 0, 0.25);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}

body.caoz-theme-unificado .obra-detail-page .obra-sidebar {
  padding: 28px !important;
}

body.caoz-theme-unificado .obra-detail-page .item_meta span {
  color: rgba(243, 239, 247, 0.72) !important;
}

body.caoz-theme-unificado .obra-detail-page .item_meta strong {
  color: #ffffff !important;
}

body.caoz-theme-unificado .obra-detail-page .btn_1.full-width {
  background: linear-gradient(180deg, #f3c600 0%, #d79a00 100%) !important;
  color: #111 !important;
  border: 3px solid rgba(0, 0, 0, 0.38) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 10px 0 rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
}

body.caoz-theme-unificado .obra-detail-page .btn_1.full-width:hover,
body.caoz-theme-unificado .obra-detail-page .btn_1.full-width:focus {
  transform: translateY(-2px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.24), 0 12px 0 rgba(0, 0, 0, 0.3) !important;
}

body.caoz-theme-unificado .obra-detail-page .share-buttons.lego-share {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
}

body.caoz-theme-unificado .obra-detail-page .share-buttons.lego-share li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(180deg, #1f1a26, #100d14);
  border: 3px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.28);
  border-radius: 12px;
  color: #f3eff7 !important;
}

body.caoz-theme-unificado .obra-detail-page .share-buttons.lego-share li a:hover {
  border-color: rgba(243, 198, 0, 0.75);
  color: #f3c600 !important;
}

body.caoz-theme-unificado .obra-detail-page h1 {
  color: #ffffff !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

body.caoz-theme-unificado .obra-detail-page p {
  color: rgba(243, 239, 247, 0.9) !important;
}

/* =========================================================
   1. ANIMACIÓN DE CARGA ESTILO LEGO (PRELOADER)
========================================================= */
#preloader {
  background-color: var(--lego-bg) !important;
}

.caoz-lego-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 15px;
}

/* Estructura base del ladrillo de carga */
.caoz-brick {
  width: 45px;
  height: 25px;
  border: 3px solid #000;
  border-radius: 2px;
  position: relative;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 4px 4px 0 rgba(0, 0, 0, 0.5);
  animation: legoJump 1.2s infinite ease-in-out;
}

/* Los relieves (studs) de la pieza de carga */
.caoz-brick::before,
.caoz-brick::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 12px;
  height: 6px;
  border: 3px solid #000;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  background: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.caoz-brick::before {
  left: 4px;
}

.caoz-brick::after {
  right: 4px;
}

/* Colores y tiempos de salto para que se muevan como ola */
.caoz-brick.red {
  background-color: var(--lego-red);
  animation-delay: 0s;
}

.caoz-brick.blue {
  background-color: var(--lego-blue);
  animation-delay: 0.15s;
}

.caoz-brick.yellow {
  background-color: var(--lego-yellow);
  animation-delay: 0.3s;
}

@keyframes legoJump {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-25px);
  }
}

/* =========================================================
   2. ESTILO DE LA BARRA DE BÚSQUEDA Y FILTROS (obras.php)
========================================================= */
/* Fondo de la barra de filtros en modo cristal oscuro */
body.caoz-theme-unificado .filters_full {
  background: rgba(18, 14, 22, 0.85) !important;
  border-bottom: 4px solid #000;
  backdrop-filter: blur(5px);
}

/* Inputs, Selects y Cuadros estilo Bloque */
body.caoz-theme-unificado .filters_full select,
body.caoz-theme-unificado .filters_full input.form-control,
body.caoz-theme-unificado .filters_2 {
  background-color: #1a1622 !important;
  border: 3px solid #000 !important;
  border-radius: 0px !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5) !important;
  font-weight: 500;
}

/* El botón de Filtros (Gris Lego) */
body.caoz-theme-unificado .filters_full .btn_filters {
  background-color: #444 !important;
  border: 3px solid #000 !important;
  border-radius: 0px !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5) !important;
  transition: all 0.1s;
}

/* Efecto al hacer clic en filtros */
body.caoz-theme-unificado .filters_full .btn_filters:hover,
body.caoz-theme-unificado .filters_full select:hover,
body.caoz-theme-unificado .filters_full input.form-control:focus {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
  outline: none;
}

/* =========================================================
   3. DISEÑO DE LA PÁGINA DE DETALLE DE OBRA (obra.php)
========================================================= */

/* 1. Fondo Global de Placa de Lego (reemplaza el color plano) */
body.caoz-theme-unificado::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Textura Lego como la del header pero aplicada a toda la pantalla */
  background-image:
    radial-gradient(circle at 9px 9px, rgba(255, 255, 255, 0.05) 0%, transparent 12%),
    radial-gradient(circle at 13px 13px, rgba(0, 0, 0, 0.5) 0%, transparent 15%),
    radial-gradient(circle at 11px 11px, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 10%, transparent 11%);
  background-size: 22px 22px;
  background-color: #0d0a11;
  /* Color base ultra oscuro */
}

/* 2. Paneles translúcidos (Efecto cristal oscuro sobre el Lego) */
body.caoz-theme-unificado .box_general,
body.caoz-theme-unificado .box_bid {
  background: rgba(22, 16, 25, 0.65) !important;
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0px !important;
  /* Adiós bordes redondos, estilo bloque */
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.4) !important;
}

/* 3. Imagen Principal de la Obra (Marco tipo Lego) */
body.caoz-theme-unificado .box_general>img.img-fluid {
  border-radius: 0px !important;
  border: 4px solid #000 !important;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 30px;
}

/* 4. Corregir el fondo blanco feo del carrusel */
body.caoz-theme-unificado .item>div[style] {
  background-color: rgba(0, 0, 0, 0.4) !important;
  /* Fondo oscuro transparente */
  border: 3px solid #000 !important;
  border-radius: 0px !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 6px 6px 0 rgba(0, 0, 0, 0.5) !important;
}

/* 5. Textos y detalles técnicos (Toque tecnológico) */
body.caoz-theme-unificado .item_meta strong {
  color: var(--lego-yellow) !important;
  /* Resalta los datos en amarillo Lego */
  font-family: 'Courier New', Courier, monospace;
  /* Fuente de computadora retro/tech */
  font-size: 1.15em;
  text-shadow: 1px 1px 0 #000;
}

/* Brillo neón para la etiqueta de NFC */
body.caoz-theme-unificado .text-success {
  color: var(--lego-green) !important;
  text-shadow: 0 0 8px rgba(42, 200, 122, 0.5);
}

/* 6. Botones de Redes Sociales (Piezas de Lego 1x1) */
body.caoz-theme-unificado .share-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  padding-top: 15px;
  margin-bottom: 0;
  list-style: none;
}

body.caoz-theme-unificado .share-buttons li {
  margin: 0;
}

body.caoz-theme-unificado .share-buttons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(145deg, #1d1721 0%, #35293f 100%);
  color: #f7f1c6 !important;
  border-radius: 16px !important;
  border: 3px solid rgba(243, 198, 0, 0.35);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 22px;
  position: relative;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

/* El 'stud' (relieve 3D) del botoncito */
body.caoz-theme-unificado .share-buttons li a::before {
  display: none;
}

body.caoz-theme-unificado .share-buttons li a i {
  z-index: 1;
  /* El ícono va encima del relieve */
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* Efecto al presionar la pieza de red social */
body.caoz-theme-unificado .share-buttons li a:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #f3c600 0%, #d79a00 100%);
  color: #111 !important;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.55);
  /* Cambia a rojo Lego al pasar el mouse */
}