/* ============ Base / Variables ============ */
:root{
  --bg-page: #111;
  --ink: #333;
  --muted: #666;
  --brand: #FD6609;
  --panel: #fff;
  --shadow: 0 2px 8px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 5px rgba(0,0,0,.25);
}

html, body { height: 100%; }
body{
  margin: 0;
  color: var(--ink);
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  background: var(--bg-page);
}

/* ===== Fondo a pantalla completa (Supersized) y rejilla ===== */
#supersized{
  position: fixed; inset: 0;
  z-index: -3 !important;   /* por detrás de todo */
  height: 100%; width: 100%;
}
#supersized-loader{
  position: fixed; top: 50%; left: 50%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  background: rgba(0,0,0,.75) url("../i/loader.gif") no-repeat center;
  border-radius: 6px; z-index: 10;
}

/* Rejilla/mosaico (igual que el efecto antiguo) */
.bg-grid,
.home-bg{ /* mantener compat con markup antiguo */
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -2;                  /* por encima de las fotos, por debajo del contenido */
  background: url("../i/home-bg.png") repeat center;
  opacity: .55;
}

/* ============ Enlaces / titulación ============ */
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: none !important; }
h1,h2,h3,h4,h5,h6{
  font-weight: normal; margin-bottom: .8em; color: var(--ink);
}
h1{ font-size: 44px; } h2{ font-size: 24px; } h3{ font-size: 22px; }
h4{ font-size: 20px; } h5{ font-size: 18px; } h6{ font-size: 14px; }
h1 small, h2 small, h3 small{ display:block; color:#333; margin-top:2px; font-size:14px; }
h3 small{ font-size:11px; }
p{ line-height:1.6; margin: 1em 0; }
hr{ height:2px; margin:35px 0; border:0; background:url("../i/bg-hr.gif") repeat-x center; clear: both; }

/* ============ Panel blanco de contenido ============ */
.main-wrapper{
  background: var(--panel);
  box-shadow: var(--shadow);
  position: relative;
  width: min(1100px, calc(100% - 320px));
  margin: 80px auto 80px 260px; /* deja hueco al menú lateral */
}
.main{ min-height: 100%; }

/* ⛔ En la HOME no hay panel blanco */
body.home .main-wrapper{ display: none; }

/* Clearfix para que no se "corte" el panel con elementos flotados */
.content-wrapper::after,
.content::after,
.article-portfolio::after{
  content: ""; display: block; clear: both;
}
.content-wrapper{ margin: 0; min-height: 150px; padding-bottom: 90px; }
.content{ width:100%; min-height:100%; margin:0 auto !important; }

/* ============ Lateral fijo: logo + menú ============ */
#wpadminbar { z-index:1008 !important; }

.menu-logo{
  position: fixed; top: 80px; left: 20px; width:190px;
  box-shadow: var(--shadow);
  border-radius: 5px; background: transparent;
}
.logo{
  background: linear-gradient(to bottom, #941818 0%, #7a2a2a 100%);
  opacity: .8; border-radius: 5px 5px 0 0;
}
.logo img{ position:relative; padding:20px 3%; width:94%; height:auto; }
.logo h1{ margin-bottom:0; }

.menu-nav-top{ display:block; }
.nav-top-wrapper{ text-transform: uppercase; background: #fff; }
.nav-top{ list-style:none; position:relative; margin:0; padding:0; }

.nav-top-wrapper .nav-top li{
  border-bottom:1px solid #e0e0e0; padding:10px 12px; position:relative;
  font: 15px Tahoma, Geneva, sans-serif;
  background: url("../i/arr-nav-sidebar.png") no-repeat 170px center;
}
.nav-top-wrapper .nav-top li a{ color:#000; }
.nav-top-wrapper .nav-top li a:hover{ color:#666 !important; }

.nav-top-wrapper .nav-top li .sub-menu{
  position:absolute; top:-1px; left:190px; width:180px;
  list-style:none; margin:0; padding:0;
  background:#000; color:#fff; opacity:.9; z-index:1000 !important;
  border:1px solid #2F2F2F; box-shadow: var(--shadow-sm);
}
.nav-top-wrapper .nav-top li .sub-menu li{ border-bottom:1px solid #343434; font-size:12px !important; }
.nav-top-wrapper .nav-top li .sub-menu li a{ color:#fff; }
.sub-menu-wrapper{ display:none; }
.sub-menu-wrapper li{ position:relative; }
.widget_nav_menu .sub-menu{ display:block; }

/* ============ Cabecera interior ============ */
.title-wrapper{ margin-top:0; height:120px; }
.title-wrapper .title{ overflow:hidden; margin:0 auto; height:120px; }
.title-wrapper .title h1{ float:left; margin:40px 10px 0 30px; }
.title-wrapper .title .desc{ color:#777; float:left; font-size:16px; margin:58px 0 0; }

.nav-header-wrapper{ border-bottom:1px dotted #E4E4E4; margin-bottom:35px; }
.nav-header-wrapper .nav-header{ height:40px; width:100%; }
.nav-header-wrapper .nav-header li{ float:left; margin:0 0 0 35px; list-style:none; }
.nav-header-wrapper .nav-header li a{
  color:#666; display:block; font: 12px "Trebuchet MS", system-ui, sans-serif;
  height:40px; line-height:3.4em;
}
.nav-header-wrapper .nav-header li a:hover,
.nav-header li.current-menu-item a{
  background:url(../i/arr-nav-header-active.png) center bottom no-repeat;
  text-decoration:none;
}

/* ============ Bloques de contenido ============ */
.article{ display:inline-block; float:left; padding:0 30px; width:500px; position:relative; }
.article-portfolio{ display:inline-block; float:left; width:765px; margin:0; padding-left:35px; }
.gallery .article-block-portfolio{ margin-bottom:15px; }

.article-block-portfolio{
  display:inline-block; float:left; line-height:1.6em;
  margin:0 35px 40px 0; width:220px; position:relative;
}
.article-block-portfolio h2{ margin-bottom:10px; }
.article-block-portfolio p{ margin:10px 0; }
.label{ box-sizing:border-box; background:rgba(0,0,0,.6); padding:5px; width:100%; color:#fff; position:absolute; bottom:0; }

.twocol{ width:347px; }
.onecol{ width:730px; }

/* ============ Footer fijo (toda la anchura) ============ */
.footer{
  position: fixed; left:0; right:0; bottom:0;
  z-index: 1000 !important;
  background: linear-gradient(to bottom, #941818 0%, #7a2a2a 100%);
  opacity:.9; color:#fff;
}
.footer a{ color:#fff !important; }
.footer-links{ float:right; }
.footer-links ul{ margin:0; padding:0; list-style:none; }
.footer-links ul li{ float:left; padding-left:10px; white-space:nowrap; font-size:11px; line-height:1.7; }

/* ============ Responsive mínimos ============ */
@media (max-width: 1024px){
  .main-wrapper{ margin-left: 260px; width: calc(100% - 300px); }
}
@media (max-width: 900px){
  .menu-logo{ position: static; width:auto; margin: 20px; }
  .main-wrapper{ margin: 20px auto 80px; width: min(1100px, 94%); }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}