/*
Theme Name: Extraordinarium Theme
Theme URI: https://example.com/
Author: Arturo Rivera
Author URI: https://openai.com/
Description: Tema editorial oscuro para cuentos, testimonios y bestiario de terror literario.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: extraordinarium-theme
*/

:root{
  --extra-bg: #0b0b0d;
  --extra-panel: #111114;
  --extra-panel-2: #151519;
  --extra-text: #f4efe5;
  --extra-text-soft: #d9d1c1;
  --extra-muted: #a89d8a;
  --extra-accent: #7c1420;
  --extra-accent-2: #a12433;
  --extra-border: rgba(255,255,255,0.08);
  --extra-overlay: rgba(8,8,10,0.65);
  --extra-overlay-strong: rgba(6,6,8,0.82);
  --extra-shadow: 0 20px 60px rgba(0,0,0,0.35);
  --extra-radius: 22px;
  --extra-content-width: 1240px;
  --extra-reading-width: 860px;
  --extra-serif: Georgia, "Times New Roman", serif;
  --extra-sans: "Segoe UI", Arial, Helvetica, sans-serif;
}

html {scroll-behavior: smooth;}
body{
  margin:0;
  background:
      radial-gradient(circle at top, rgba(124,20,32,0.08), transparent 25%),
      linear-gradient(180deg, #0a0a0b 0%, #111114 100%);
  color:var(--extra-text);
  font-family:var(--extra-sans);
  line-height:1.65;
  font-size:16px;
}
body.admin-bar .site-header{ top:32px; }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
p{margin:0 0 1.1rem;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--extra-serif);
  line-height:1.1;
  margin:0 0 1rem;
  letter-spacing:-0.02em;
}
.container{
  width:min(calc(100% - 2rem), var(--extra-content-width));
  margin-inline:auto;
}
.screen-reader-text{
  position:absolute;
  left:-9999px;
}
.skip-link{
  position:absolute;
  top:-100px;
  left:1rem;
  z-index:1000;
  background:#fff;
  color:#000;
  padding:.75rem 1rem;
  border-radius:12px;
}
.skip-link:focus{top:1rem;}
.section-label{
  color:var(--extra-muted);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.75rem;
  margin-bottom:1rem;
}
.section-title{
  font-size:clamp(2rem, 4vw, 3.7rem);
  margin-bottom:.75rem;
}
.section-intro{
  color:var(--extra-text-soft);
  max-width:66ch;
}
.site-header{
  position:sticky;
  top:0;
  z-index:200;
  backdrop-filter: blur(14px);
  background:rgba(8,8,10,0.8);
  border-bottom:1px solid var(--extra-border);
}
.header-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.branding{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}
.site-logo{
  width:52px;
  height:52px;
  object-fit:contain;
}
.site-title{
  font-family:var(--extra-serif);
  font-size:clamp(1.6rem, 3vw, 2.25rem);
  margin:0;
}
.site-tagline{
  color:var(--extra-muted);
  font-size:.88rem;
  margin-top:.15rem;
}
.main-navigation{
  display:flex;
  align-items:center;
  gap:1rem;
}
.main-navigation ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0;
  margin:0;
}
.main-navigation li{margin:0;}
.main-navigation a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .75rem;
  border-radius:999px;
  transition:background .25s ease, color .25s ease;
  color:var(--extra-text-soft);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{
  background:rgba(255,255,255,0.05);
  color:#fff;
}
.header-tools{
  display:flex;
  align-items:center;
  gap:.65rem;
}
.header-icon,
.menu-toggle{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--extra-border);
  background:rgba(255,255,255,0.02);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.header-icon:hover,
.menu-toggle:hover{transform:translateY(-1px); background:rgba(255,255,255,0.06);}
.menu-toggle{display:none;}
.hero{
  position:relative;
  isolation:isolate;
  min-height:76vh;
  display:grid;
  align-items:end;
  overflow:hidden;
}
.hero.has-compact-height{ min-height:55vh; }
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--extra-overlay);
  z-index:-1;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.75) 100%),
    linear-gradient(90deg, rgba(124,20,32,.28) 0%, transparent 42%);
  z-index:-1;
}
.hero-media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  z-index:-2;
  transform:scale(1.03);
}
.hero-content{
  padding:9rem 0 4rem;
}
.hero-content.narrow{
  max-width:850px;
}
.hero-kicker{
  color:var(--extra-muted);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.8rem;
  margin-bottom:1.25rem;
}
.hero-title{
  font-size:clamp(3rem, 7vw, 6rem);
  margin-bottom:.9rem;
}
.hero-subtitle{
  max-width:50ch;
  color:var(--extra-text-soft);
  font-size:clamp(1rem, 1.2vw + .8rem, 1.25rem);
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.6rem;
  color:var(--extra-text-soft);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:2rem;
}
.button,
.wp-element-button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:48px;
  padding:.9rem 1.25rem;
  border-radius:999px;
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--extra-accent-2), var(--extra-accent));
  color:#fff;
  font-weight:700;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  box-shadow:0 10px 25px rgba(124,20,32,0.22);
}
.button:hover,
.wp-element-button:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);
}
.button.alt{
  background:transparent;
  border-color:var(--extra-border);
  box-shadow:none;
}
.section{
  padding:4.75rem 0;
}
.feature-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--extra-radius);
  min-height:420px;
  display:grid;
  align-items:end;
  border:1px solid var(--extra-border);
  box-shadow:var(--extra-shadow);
  background:var(--extra-panel);
}
.feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(9,9,11,.12) 0%, rgba(9,9,11,.92) 100%);
  z-index:1;
}
.feature-card .media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.feature-card .content{
  position:relative;
  z-index:2;
  padding:2rem;
  max-width:760px;
}
.feature-card .meta{
  color:var(--extra-muted);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
  margin-bottom:.7rem;
}
.feature-card h2{ font-size:clamp(2rem, 5vw, 3.6rem); }
.feature-card p{ color:var(--extra-text-soft); max-width:56ch; }

.grid{
  display:grid;
  gap:1.35rem;
}
.grid.cards-4{
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.grid.cards-3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.card,
.story-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--extra-border);
  box-shadow:var(--extra-shadow);
}
.story-card{ display:flex; flex-direction:column; height:100%; }
.story-card .thumb{
  aspect-ratio: 16 / 10;
  background-size:cover;
  background-position:center;
}
.story-card .body{
  padding:1.3rem 1.15rem 1.4rem;
}
.story-card h3{
  font-size:clamp(1.55rem, 3vw, 2.15rem);
  margin-bottom:.6rem;
}
.story-card .excerpt{ color:var(--extra-text-soft); font-size:1rem; }
.story-card .meta{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  font-size:.88rem;
  color:var(--extra-muted);
  margin-top:.85rem;
}
.story-card:hover{
  transform:translateY(-4px);
}
.story-card,
.category-card,
.feature-card{ transition:transform .25s ease, border-color .25s ease; }
.story-card:hover,
.category-card:hover,
.feature-card:hover{ border-color:rgba(255,255,255,0.18); }
.category-grid{
  display:grid;
  gap:1.35rem;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.category-card{
  position:relative;
  min-height:380px;
  border-radius:26px;
  overflow:hidden;
  border:1px solid var(--extra-border);
  box-shadow:var(--extra-shadow);
  display:flex;
  align-items:flex-end;
}

.category-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,5,6,0.15) 0%, rgba(5,5,6,0.88) 100%);
  z-index:1;
}

.category-card .media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

.category-card .content{
  position:relative;
  z-index:2;
  width:100%;
  padding:1.4rem;
}

.category-card h3{
  font-size:clamp(1.6rem, 3vw, 2.5rem);
  margin:0 0 .45rem;
}

.category-card p{
  color:var(--extra-text-soft);
  margin:0;
  line-height:1.35;
  font-size: 1rem;
}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--extra-border);
  border-radius:var(--extra-radius);
  box-shadow:var(--extra-shadow);
}
.single-hero{
  min-height:60vh;
}
.single-reading{
  position:relative;
  padding:4rem 0 5rem;
  background:
      linear-gradient(180deg, rgba(7,7,8,.55), rgba(7,7,8,.8)),
      var(--reading-bg, linear-gradient(180deg, #121216, #0b0b0d));
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
body.reading-light .single-reading{
  color:#1f1814;
  background:
    linear-gradient(180deg, rgba(247,241,229,.9), rgba(247,241,229,.94)),
    var(--reading-bg, linear-gradient(180deg, #f5efe4, #e8deca));
}
body.reading-sepia .single-reading{
  color:#2f241d;
  background:
    linear-gradient(180deg, rgba(228,215,189,.86), rgba(228,215,189,.92)),
    var(--reading-bg, linear-gradient(180deg, #d8c7a8, #c1ae8a));
}
.reading-shell{
  width:min(calc(100% - 2rem), var(--extra-reading-width));
  margin-inline:auto;
}
.reading-toolbar{
  display:flex;
  justify-content:flex-end;
  gap:.55rem;
  margin-bottom:1rem;
}
.reading-mode{
  border:1px solid var(--extra-border);
  background:rgba(255,255,255,.06);
  color:inherit;
  border-radius:999px;
  padding:.7rem 1rem;
  cursor:pointer;
}
.reading-article{
  padding:2rem 0;
  font-size:1.18rem;
}
.reading-article p,
.reading-article li{
  font-family:var(--extra-serif);
  line-height:1.9;
  font-size:clamp(1.06rem, .2vw + 1rem, 1.22rem);
}
.reading-article h2,
.reading-article h3{
  margin-top:2.2rem;
}
.reading-article blockquote{
  margin:2rem 0;
  padding:1.4rem 1.5rem;
  border-left:4px solid var(--extra-accent-2);
  background:rgba(255,255,255,0.05);
  border-radius:0 18px 18px 0;
}
.reading-article hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  margin:2rem 0;
}
.archive-header{
  padding:7rem 0 3rem;
}
.archive-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.35rem;
  padding-bottom:4rem;
}
.pagination{
  display:flex;
  justify-content:center;
  gap:.4rem;
  padding:0 0 4rem;
}
.pagination .page-numbers{
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--extra-border);
  background:rgba(255,255,255,0.03);
}
.site-footer{
  padding:2.25rem 0 3rem;
  border-top:1px solid var(--extra-border);
  background:rgba(4,4,5,0.65);
}
.footer-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:2fr 1fr 1fr;
}
.footer-copy{
  color:var(--extra-muted);
}
.search-overlay{
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(4,4,6,0.88);
  display:none;
  padding:2rem;
}
.search-overlay.is-open{
  display:grid;
  place-items:center;
}
.search-box{
  width:min(100%, 760px);
  background:var(--extra-panel);
  border:1px solid var(--extra-border);
  border-radius:24px;
  padding:1rem;
  box-shadow:var(--extra-shadow);
}
.search-box form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.8rem;
}
.search-box input[type="search"],
.search-box input[type="text"],
.search-box input[type="email"],
.search-box textarea{
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px solid var(--extra-border);
  background:#0f0f13;
  color:#fff;
  padding:0 1rem;
  font:inherit;
}
.search-box textarea{
  min-height:160px;
  padding:1rem;
}
.search-close{
  position:absolute;
  top:1rem;
  right:1rem;
}
.not-found{
  padding:6rem 0;
}
.wp-caption,
.gallery-caption{ max-width:100%; }
.alignwide{ width:min(calc(100% - 2rem), 1280px); margin-inline:auto; }
.alignfull{ width:100%; }
.author-index{
  columns:2;
  column-gap:2rem;
}
.author-index li{
  break-inside:avoid;
  margin-bottom:.8rem;
}
@media (max-width: 1100px){
  .grid.cards-4,
  .archive-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .category-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  body.admin-bar .site-header{ top:46px; }
  .menu-toggle{display:grid;}
  .main-navigation{
    position:fixed;
    inset:79px 1rem auto 1rem;
    background:rgba(11,11,13,0.98);
    border:1px solid var(--extra-border);
    border-radius:20px;
    padding:1rem;
    box-shadow:var(--extra-shadow);
    display:none;
  }
  .main-navigation.is-open{display:block;}
  .main-navigation ul{
    flex-direction:column;
    align-items:stretch;
  }
  .main-navigation a{
    width:100%;
    justify-content:flex-start;
  }
  .footer-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 700px){
  .hero-content{ padding:8rem 0 3rem; }
  .grid.cards-4,
  .grid.cards-3,
  .archive-grid,
  .category-grid{ grid-template-columns:1fr; }
  .hero-title{ font-size:clamp(2.2rem, 9vw, 3.7rem); }
  .feature-card{ min-height:360px; }
  .story-card h3{ font-size:1.8rem; }
  .reading-article{ font-size:1rem; }
  .author-index{ columns:1; }
}