/*
Theme Name: Historia y Misterios Armory
Theme URI: https://historiaymisterios.com/
Author: Thydom
Description: Tema editorial medieval inspirado en una armería fantástica para Sangre, Sudor y Hierro.
Version: 1.0.0
Text Domain: ssyh-armory
*/

:root {
  --ink: #090909;
  --charcoal: #151310;
  --iron: #25201a;
  --parchment: #d7c29a;
  --parchment-light: #f0dfbc;
  --gold: #d8a833;
  --gold-bright: #f2cf67;
  --blood: #8d1717;
  --blood-bright: #c42e22;
  --line: rgba(216, 168, 51, .34);
  --muted: #b7aa91;
  --shadow: 0 18px 60px rgba(0, 0, 0, .48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #eee5d3;
  background:
    radial-gradient(circle at 50% -10%, rgba(126, 21, 17, .25), transparent 36rem),
    linear-gradient(180deg, #0a0908 0, #14110e 44rem, #080706 100%);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.65;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .16;
  background-image: repeating-linear-gradient(120deg, transparent 0 9px, rgba(255,255,255,.025) 10px 11px);
  pointer-events: none;
}
a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: #fff1b6; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  border-bottom: 1px solid rgba(216,168,51,.34);
  background: rgba(20, 15, 13, .93);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.header-inner {
  width: min(1380px, calc(100% - 36px));
  min-height: 72px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 13px; color: #fff; min-width: 275px; }
.brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: block;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #260908;
  box-shadow: 0 0 0 3px #120d09, 0 0 24px rgba(196,46,34,.38), inset 0 0 0 1px rgba(255,255,255,.22);
}
.brand-mark img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; transform:scale(1.04); }
.brand-copy strong { display: block; letter-spacing: .12em; font-size: 1rem; text-transform: uppercase; }
.brand-copy small { display:block; color:var(--muted); font-size:.72rem; letter-spacing:.06em; }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.primary-nav a { padding: 9px 14px; color: #e8dbc3; text-transform: uppercase; letter-spacing: .09em; font: 700 .76rem/1 Arial, sans-serif; border-bottom: 2px solid transparent; }
.primary-nav a:hover { color: var(--gold-bright); border-color: var(--gold); }
.nav-admin { border: 1px solid var(--line); background: rgba(216,168,51,.08); }
.nav-surprise { border:1px solid rgba(196,46,34,.62); background:linear-gradient(180deg,rgba(141,23,23,.34),rgba(62,10,8,.28)); }

.hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0f0d0b var(--hero-image, none) center 32% / cover no-repeat;
}
.hero::before { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,4,3,.98) 0%, rgba(8,6,5,.82) 42%, rgba(7,5,4,.42) 75%, rgba(7,5,4,.75)), linear-gradient(0deg,#0a0806 0,transparent 62%); }
.hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,transparent,var(--blood-bright),var(--gold),var(--blood-bright),transparent); opacity:.75; }
.hero-content { position:relative; z-index:1; width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:86px 0 58px; }
.eyebrow { margin:0 0 8px; color:var(--gold-bright); font:700 .78rem/1.3 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.hero h1 { max-width:900px; margin:0; color:#f8edda; font-size:clamp(2.8rem,7vw,6.3rem); line-height:.92; letter-spacing:-.04em; text-shadow:0 5px 28px #000; }
.hero p { max-width:690px; margin:20px 0 0; color:#d2c5af; font-size:clamp(1rem,1.7vw,1.25rem); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:25px; }
.hero-actions .button { display:inline-flex; align-items:center; }
.hero-link { color:#eadcbf; border-bottom:1px solid var(--gold); font:800 .76rem/1.4 Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.hero-kpis { display:flex; flex-wrap:wrap; gap:1px; margin-top:28px; }
.hero-kpis span { min-width:130px; padding:11px 15px; background:rgba(10,8,7,.72); border:1px solid var(--line); color:#eee2ca; font:700 .75rem/1.2 Arial,sans-serif; text-transform:uppercase; letter-spacing:.06em; }
.hero-kpis b { display:block; margin-bottom:2px; color:var(--gold-bright); font-size:1.25rem; }

.content-shell { width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:38px 0 80px; }
.filter-panel { position:relative; margin-top:-70px; z-index:3; padding:20px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(38,31,25,.97),rgba(16,13,11,.98)); box-shadow:var(--shadow); }
.filter-form { display:grid; grid-template-columns:minmax(220px,2fr) repeat(2,minmax(150px,1fr)) auto; gap:12px; }
.filter-form input,.filter-form select { width:100%; min-height:46px; padding:0 14px; color:#f0e5d2; background:#0d0b09; border:1px solid #56452b; outline:none; }
.filter-form input:focus,.filter-form select:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(216,168,51,.14); }
.button { min-height:46px; padding:0 20px; cursor:pointer; border:1px solid #e0b844; color:#180e04; background:linear-gradient(#f0ca61,#b87b1a); font:800 .78rem/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.button:hover { filter:brightness(1.12); }
.section-heading { margin:42px 0 22px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-heading h2 { margin:0; color:#f5e8d1; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1; }
.section-heading p { margin:0; color:var(--muted); font-family:Arial,sans-serif; }

.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.lore-card { position:relative; min-width:0; overflow:hidden; border:1px solid #493c2a; background:#15120f; box-shadow:0 10px 28px rgba(0,0,0,.34); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.lore-card:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:0 18px 38px rgba(0,0,0,.55),0 0 22px rgba(216,168,51,.08); }
.card-image { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:#090807; }
.card-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,9,7,.9),transparent 52%); }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.lore-card:hover .card-image img { transform:scale(1.035); }
.card-ribbon { position:absolute; z-index:2; left:12px; top:12px; padding:6px 9px; color:#fff1c9; background:rgba(104,18,15,.9); border:1px solid rgba(242,207,103,.55); font:700 .66rem/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.card-body { padding:18px 19px 20px; }
.card-meta { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; color:var(--gold); font:700 .68rem/1.3 Arial,sans-serif; text-transform:uppercase; letter-spacing:.07em; }
.card-body h3 { margin:0 0 10px; color:#f2e5ce; font-size:1.42rem; line-height:1.1; }
.card-body p { margin:0; color:#bdb19d; font-size:.93rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pagination { margin-top:42px; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.pagination .page-numbers { min-width:42px; min-height:42px; display:grid; place-items:center; padding:0 12px; border:1px solid #554428; color:#e8d9bf; background:#17130f; }
.pagination .current,.pagination a:hover { color:#1b1004; background:var(--gold); border-color:var(--gold-bright); }

.single-hero { min-height:560px; align-items:flex-end; }
.single-hero .hero-content { padding-bottom:46px; }
.single-hero h1 { font-size:clamp(2.8rem,6vw,5.7rem); max-width:1050px; }
.single-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:30px; align-items:start; }
.article-panel,.armory-panel { border:1px solid #493c2a; background:linear-gradient(145deg,rgba(31,26,21,.96),rgba(15,13,11,.98)); box-shadow:var(--shadow); }
.article-panel { padding:clamp(24px,5vw,60px); }
.article-lead { margin:0 0 30px; padding:0 0 26px; border-bottom:1px solid var(--line); color:#e2cfaa; font-size:1.25rem; line-height:1.55; }
.entry-content { color:#ddd1bc; font-size:1.08rem; }
.entry-content p { margin:0 0 1.35em; }
.entry-content p:first-child::first-letter { float:left; margin:.06em .12em 0 0; color:var(--gold-bright); font-size:4.1em; line-height:.75; text-shadow:2px 2px 0 #4b160f; }
.armory-panel { position:sticky; top:92px; padding:20px; }
.armory-panel h2 { margin:0 0 15px; color:var(--gold-bright); font-size:1rem; text-transform:uppercase; letter-spacing:.12em; }
.stat-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid rgba(216,168,51,.18); color:#bdb09b; font:700 .78rem/1.2 Arial,sans-serif; text-transform:uppercase; }
.stat-row b { color:#f5e5c8; font-size:.95rem; }
.ornament { margin:20px 0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.post-navigation a { padding:16px; border:1px solid var(--line); background:#15110e; }
.post-navigation small { display:block; color:var(--muted); font:700 .65rem Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }

.site-footer { padding:50px 20px; border-top:1px solid var(--line); color:#8f8575; text-align:center; background:#080706; font-family:Arial,sans-serif; }
.site-footer strong { color:var(--gold); letter-spacing:.1em; text-transform:uppercase; }
.empty-state { padding:60px 24px; text-align:center; border:1px solid var(--line); background:#15120f; }
.tml { max-width:560px; margin:0 auto; }
.tml .tml-field-wrap { margin:0 0 18px; }
.tml label { display:block; margin-bottom:7px; color:var(--gold-bright); font:700 .75rem Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.tml input[type='text'],.tml input[type='email'],.tml input[type='password'] { width:100%; min-height:48px; padding:10px 13px; color:#f2e5ce; border:1px solid #56452b; background:#0c0a08; }
.tml input[type='submit'] { min-height:46px; padding:0 22px; cursor:pointer; border:1px solid #e0b844; color:#180e04; background:linear-gradient(#f0ca61,#b87b1a); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.tml .tml-links { margin-top:20px; padding-left:20px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 980px) {
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .single-layout { grid-template-columns:1fr; }
  .armory-panel { position:relative; top:auto; }
  .filter-form { grid-template-columns:1fr 1fr; }
  .filter-form input { grid-column:1/-1; }
  .primary-nav a:not(.nav-admin):not(.nav-surprise) { display:none; }
}
@media (max-width: 640px) {
  .header-inner,.content-shell,.hero-content { width:min(100% - 24px,1280px); }
  .brand { min-width:0; }
  .brand-copy small { display:none; }
  .nav-admin { padding:9px!important; }
  .nav-surprise { padding:9px!important; }
  .hero { min-height:390px; }
  .hero-content { padding-bottom:78px; }
  .filter-panel { margin-top:-50px; padding:13px; }
  .filter-form { grid-template-columns:1fr; }
  .filter-form input { grid-column:auto; }
  .card-grid { grid-template-columns:1fr; }
  .section-heading { align-items:start; flex-direction:column; }
  .single-hero { min-height:470px; }
  .post-navigation { grid-template-columns:1fr; }
}