/* =========================================================
   NIGHTFALL DOMINION — THE VEIL
   Global Theme + NFD Components
   “Irregularidad Carmesí Lunar”
   ========================================================= */

/* 1) Design tokens */
:root{
  --nfd-bg: #0b0d12;
  --nfd-surface: #101521;
  --nfd-surface-2: #0f1320;
  --nfd-border: rgba(255,255,255,.10);
  --nfd-border-2: rgba(255,255,255,.16);

  --nfd-text: rgba(255,255,255,.90);
  --nfd-text-soft: rgba(255,255,255,.72);
  --nfd-text-faint: rgba(255,255,255,.55);

  --nfd-moon: #9fb7ff;
  --nfd-crimson: #a3162d;
  --nfd-silver: #c9d2e3;

  --nfd-radius: 16px;
  --nfd-radius-sm: 12px;
  --nfd-space: 18px;
  --nfd-max: 1180px;

  /* Irregular bleed tuning */
  --nfd-bleed-moon: rgba(159,183,255,.28);
  --nfd-bleed-blood: rgba(163,22,45,.26);
  --nfd-bleed-dark: rgba(0,0,0,.35);
}

/* 2) Background + base readability */
html, body{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(159,183,255,.10), transparent 60%),
              radial-gradient(900px 500px at 20% 0%, rgba(163,22,45,.08), transparent 55%),
              linear-gradient(180deg, #0b0d12 0%, #080a0f 100%);
  color: var(--nfd-text);
}

/* Content width fallback */
.site-content, .inside-article, .inside-page-header{
  max-width: var(--nfd-max);
  margin-left: auto;
  margin-right: auto;
}

/* 3) Typography */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
}
h1,h2,h3,h4{
  color: var(--nfd-silver);
  letter-spacing: .3px;
}
p, li{
  color: var(--nfd-text-soft);
}

/* 4) Links */
a{
  color: var(--nfd-moon);
  text-decoration: none;
}
a:hover{
  color: #c1d0ff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(159,183,255,.55);
}

/* 5) Navigation */
.main-navigation{
  background: rgba(12,14,18,.70);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nfd-border);
}
.main-navigation a{
  color: var(--nfd-text);
}
.main-navigation a:hover{
  color: var(--nfd-moon);
}

/* 6) Surfaces (GeneratePress common containers) */
.inside-article,
.inside-page-header,
.separate-containers .site-main > *{
  background: rgba(16,21,33,.72);
  border: 1px solid var(--nfd-border);
  border-radius: var(--nfd-radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

/* 7) Buttons */
button, .button, a.button,
.wp-block-button__link{
  background: linear-gradient(180deg, rgba(159,183,255,.18), rgba(159,183,255,.08));
  color: var(--nfd-text);
  border: 1px solid rgba(159,183,255,.25);
  border-radius: 999px;
  padding: 10px 16px;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 0 0 1px rgba(159,183,255,.18), 0 0 22px rgba(159,183,255,.10);
}
button:hover, .button:hover, a.button:hover,
.wp-block-button__link:hover{
  transform: translateY(-1px);
  border-color: rgba(159,183,255,.35);
  box-shadow:
    0 0 0 1px rgba(159,183,255,.22),
    0 0 18px rgba(159,183,255,.10),
    0 0 22px rgba(163,22,45,.08);
}
button:active, .button:active, a.button:active,
.wp-block-button__link:active{
  transform: translateY(0);
}

/* Optional blood CTA utility class */
.nfd-cta-blood .wp-block-button__link,
a.nfd-cta-blood, .nfd-cta-blood a{
  background: linear-gradient(180deg, rgba(163,22,45,.25), rgba(163,22,45,.10));
  border-color: rgba(163,22,45,.35);
  box-shadow: 0 0 0 1px rgba(163,22,45,.22), 0 0 26px rgba(163,22,45,.10);
}

/* 8) Forms */
input, select, textarea{
  background: rgba(8,10,15,.65);
  color: var(--nfd-text);
  border: 1px solid var(--nfd-border);
  border-radius: 12px;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(159,183,255,.35);
  box-shadow: 0 0 0 4px rgba(159,183,255,.10);
}

/* 9) NFD components */
.nfd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
  margin:18px 0;
}
@media(max-width:900px){
  .nfd-grid{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
}

.nfd-list{
  display:grid;
  gap:12px;
}

.nfd-card, .nfd-list-item{
  background: linear-gradient(180deg, rgba(16,21,33,.85), rgba(10,12,18,.78));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--nfd-radius);
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.30),
              0 0 0 1px rgba(159,183,255,.10),
              0 0 0 1px rgba(163,22,45,.08) inset;
  position: relative;
}

.nfd-card a{display:block;text-decoration:none;color:inherit}
.nfd-thumb img{width:100%;height:auto;display:block;filter:saturate(1.05) contrast(1.05)}
.nfd-card h3, .nfd-list-item h3{font-size:1.05rem;margin:12px 12px 8px;color:var(--nfd-silver)}
.nfd-meta{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 16px}
.nfd-badge{
  font-size:.82rem;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: rgba(255,255,255,.74);
}
.nfd-badge-muted{opacity:.65}
.nfd-date{margin-top:6px}

/* Badge “contamination” (subtle variation) */
.nfd-badge:nth-child(3n){ border-color: rgba(159,183,255,.18); }
.nfd-badge:nth-child(4n){ border-color: rgba(163,22,45,.16); }

/* 10) Header veil separator: IRREGULAR crimson/lunar */
.entry-header, .page-header{ position: relative; }

.entry-header:after, .page-header:after{
  content:"";
  display:block;
  height: 2px;
  margin-top: 14px;
  border-radius: 999px;
  background:
    conic-gradient(from 220deg,
      transparent 0 8%,
      rgba(159,183,255,.35) 8% 15%,
      transparent 15% 24%,
      rgba(163,22,45,.30) 24% 33%,
      transparent 33% 44%,
      rgba(159,183,255,.22) 44% 58%,
      transparent 58% 70%,
      rgba(163,22,45,.22) 70% 82%,
      transparent 82% 100%
    ),
    linear-gradient(90deg,
      transparent,
      rgba(159,183,255,.30),
      rgba(163,22,45,.22),
      transparent
    );
  opacity: .95;

  -webkit-mask-image: radial-gradient(40px 6px at 12% 50%, transparent 45%, #000 55%),
                      radial-gradient(60px 6px at 28% 50%, transparent 55%, #000 65%),
                      radial-gradient(50px 6px at 49% 50%, transparent 50%, #000 62%),
                      radial-gradient(70px 6px at 72% 50%, transparent 54%, #000 66%),
                      radial-gradient(55px 6px at 90% 50%, transparent 50%, #000 62%),
                      linear-gradient(#000,#000);
          mask-image: radial-gradient(40px 6px at 12% 50%, transparent 45%, #000 55%),
                      radial-gradient(60px 6px at 28% 50%, transparent 55%, #000 65%),
                      radial-gradient(50px 6px at 49% 50%, transparent 50%, #000 62%),
                      radial-gradient(70px 6px at 72% 50%, transparent 54%, #000 66%),
                      radial-gradient(55px 6px at 90% 50%, transparent 50%, #000 62%),
                      linear-gradient(#000,#000);
}

/* 11) Veil bleed overlays for panels + cards */
.nfd-card:before, .nfd-list-item:before,
.inside-article:before, .inside-page-header:before, .separate-containers .site-main > *:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(140px 90px at 16% 12%, var(--nfd-bleed-moon), transparent 65%),
    radial-gradient(160px 110px at 84% 18%, var(--nfd-bleed-blood), transparent 70%),
    radial-gradient(220px 160px at 72% 92%, rgba(159,183,255,.12), transparent 70%);
  filter: blur(10px);
}

/* Hover “wound” */
.nfd-card:hover:after, .nfd-list-item:hover:after{
  content:"";
  position:absolute;
  inset:-20px;
  pointer-events:none;
  opacity:.85;
  background:
    radial-gradient(120px 50px at 32% 22%, rgba(163,22,45,.22), transparent 60%),
    radial-gradient(160px 70px at 62% 38%, rgba(159,183,255,.18), transparent 62%),
    radial-gradient(220px 90px at 46% 64%, rgba(163,22,45,.16), transparent 70%),
    conic-gradient(from 210deg at 48% 44%,
      transparent 0 18%,
      rgba(159,183,255,.18) 18% 26%,
      transparent 26% 44%,
      rgba(163,22,45,.16) 44% 54%,
      transparent 54% 100%
    );
  filter: blur(14px);
  transform: rotate(-2deg);
}

.nfd-card:hover, .nfd-list-item:hover{
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 20px 55px rgba(0,0,0,.38),
    0 0 0 1px rgba(159,183,255,.18),
    0 0 22px rgba(159,183,255,.10),
    0 0 26px rgba(163,22,45,.08);
}

/* 12) Optional atmospheric grain (subtle) */
body:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.25) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.20) 0 1px, transparent 1px);
  background-size: 180px 180px, 220px 220px, 260px 260px;
}

/* =========================================================
   HOTFIX: Force dark containers on GeneratePress + Gutenberg
   (pégalo al FINAL del nfd-veil.css)
   ========================================================= */

.site, .site-content, .content-area, .site-main{
  background: transparent !important;
}

/* GeneratePress: contenedores reales del contenido */
.separate-containers .site-main .inside-article,
.separate-containers .site-main .inside-page-header,
.separate-containers .site-main .inside-page-hero,
.separate-containers .site-main > article,
.separate-containers .site-main > section,
.separate-containers .site-main > div,
.one-container .site-content,
.one-container .site-main,
.one-container .inside-article,
.one-container .inside-page-header,
.one-container .inside-page-hero{
  background: rgba(16,21,33,.72) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--nfd-radius) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
  color: var(--nfd-text) !important;
}

/* Títulos y texto dentro del contenedor blanco */
.entry-title, .page-title, .site-main h1, .site-main h2, .site-main h3, .site-main h4{
  color: var(--nfd-silver) !important;
}
.site-main p, .site-main li{
  color: var(--nfd-text-soft) !important;
}

/* Gutenberg: evita fondos claros en Group/Columns si los hubiera */
.wp-block-group,
.wp-block-columns,
.wp-block-column{
  background: transparent !important;
}

/* Si usas Cover, mantenlo oscuro por defecto */
.wp-block-cover{
  border-radius: var(--nfd-radius) !important;
  overflow: hidden;
}

/* =========================================================
   FINISHING PASS — Header + Gutenberg panels + spacing
   Pegar al FINAL de nfd-veil.css
   ========================================================= */

/* 1) Header / Top bar (GeneratePress) */
.site-header{
  background: rgba(12,14,18,.72) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.site-header .inside-header{
  background: transparent !important;
}
.site-logo a, .site-title a{
  color: var(--nfd-silver) !important;
}
.site-description{
  color: rgba(255,255,255,.55) !important;
}

/* Asegura que el menú no vuelva a blanco (algunos setups lo separan) */
.main-navigation, .navigation-search, .nav-float-right .main-navigation{
  background: rgba(12,14,18,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.main-navigation .main-nav ul li a{
  color: rgba(255,255,255,.86) !important;
}
.main-navigation .main-nav ul li a:hover{
  color: var(--nfd-moon) !important;
}

/* 2) Espaciado interno del panel principal */
.separate-containers .inside-article,
.separate-containers .inside-page-header{
  padding: 28px !important;
}
@media (max-width: 768px){
  .separate-containers .inside-article,
  .separate-containers .inside-page-header{
    padding: 18px !important;
  }
}

/* 3) Gutenberg: convierte Groups en “paneles del Velo” cuando quieras */
.nfd-veil-panel{
  background: linear-gradient(180deg, rgba(16,21,33,.78), rgba(10,12,18,.68)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--nfd-radius) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.30) !important;
  padding: 18px !important;
  position: relative;
  overflow: hidden;
}
.nfd-veil-panel:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(160px 90px at 14% 14%, var(--nfd-bleed-moon), transparent 65%),
    radial-gradient(180px 110px at 88% 18%, var(--nfd-bleed-blood), transparent 70%),
    radial-gradient(260px 160px at 76% 92%, rgba(159,183,255,.12), transparent 70%);
  filter: blur(10px);
}

/* 4) “Hero” del Velo para la cabecera de la página TCG */
.nfd-hero{
  padding: 22px !important;
  border-radius: var(--nfd-radius) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(900px 380px at 50% -40%, rgba(159,183,255,.14), transparent 60%),
    radial-gradient(680px 320px at 12% 20%, rgba(163,22,45,.10), transparent 55%),
    linear-gradient(180deg, rgba(16,21,33,.78), rgba(10,12,18,.66));
  position: relative;
  overflow: hidden;
}
.nfd-hero:after{
  content:"";
  position:absolute;
  inset:-30px;
  pointer-events:none;
  opacity:.35;
  background:
    conic-gradient(from 210deg at 48% 40%,
      transparent 0 18%,
      rgba(159,183,255,.16) 18% 26%,
      transparent 26% 44%,
      rgba(163,22,45,.14) 44% 54%,
      transparent 54% 100%
    );
  filter: blur(18px);
}

/* 5) Placeholder gris: intégralo al estilo (si ese bloque tiene clase nfd-media) */
.nfd-media{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--nfd-radius) !important;
  overflow: hidden;
}

/* 6) Mejora de títulos dentro del panel */
.site-main h2{
  margin-top: 26px;
}

/* =========================================================
   NIGHTFALL DOMINION — LOGO / TITLE IDENTITY
   Carmesí vampírico + pulso lunar
   ========================================================= */

/* Color base del nombre del sitio */
.site-title a,
.site-logo a{
  color: #8e0f24 !important; /* carmesí vampírico */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  /* profundidad */
  text-shadow:
    0 0 6px rgba(163,22,45,.35),
    0 0 18px rgba(163,22,45,.18),
    0 0 28px rgba(159,183,255,.08);
}

/* Hover: leve “latido” */
.site-title a:hover,
.site-logo a:hover{
  color: #b0142f !important;
  text-shadow:
    0 0 8px rgba(163,22,45,.45),
    0 0 26px rgba(163,22,45,.28),
    0 0 40px rgba(159,183,255,.12);
}

/* Evita que el tema lo vuelva gris */
.site-title,
.site-logo{
  opacity: 1 !important;
}

/* =========================================================
   Typography identity — Nightfall Dominion
   ========================================================= */

/* Logo + títulos principales */
.site-title a,
.site-logo a,
.site-main h1,
.site-main h2,
.page-header h1{
  font-family: 'Cinzel Decorative', serif !important;
}

/* Subtítulos */
.site-main h3{
  font-family: 'Cinzel Decorative', serif;
  letter-spacing: 0.05em;
}

/* Header interno TCG */
.site-main h1{
  color: #9a1228;
  text-shadow:
    0 0 10px rgba(163,22,45,.35),
    0 0 22px rgba(163,22,45,.18),
    0 0 34px rgba(159,183,255,.10);
}

/* =========================================================
   ARCANE SEAL — Site Title as Ritual Sigil
   Pegar al FINAL de nfd-veil.css
   ========================================================= */

/* Asegura que el área del título sea un "lienzo" */
.site-branding,
.site-title{
  position: relative !important;
  z-index: 2;
}

/* Tipografía del título (si ya añadiste Cinzel Decorative, esto la usa) */
.site-title a{
  position: relative !important;
  display: inline-block !important;
  padding: 10px 18px 10px 58px !important; /* deja espacio para el sello */
  color: #b0142f !important;
  font-family: 'Cinzel Decorative', serif !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;

  text-shadow:
    0 0 8px rgba(163,22,45,.40),
    0 0 22px rgba(163,22,45,.18),
    0 0 34px rgba(159,183,255,.10);
}

/* SELLO: círculo arcano (sin texto) */
.site-title a:before{
  content:"";
  position:absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  pointer-events:none;

  /* Sello ritual: anillos + “fractura” + brillo dual */
  background:
    /* fractura diagonal (velo roto) */
    linear-gradient(135deg,
      transparent 0 43%,
      rgba(163,22,45,.40) 43% 46%,
      transparent 46% 100%
    ),
    /* anillo lunar exterior */
    radial-gradient(circle at 50% 50%,
      transparent 56%,
      rgba(159,183,255,.42) 57%,
      rgba(159,183,255,.18) 60%,
      transparent 64%
    ),
    /* anillo carmesí interior */
    radial-gradient(circle at 50% 50%,
      transparent 40%,
      rgba(163,22,45,.40) 41%,
      rgba(163,22,45,.14) 46%,
      transparent 52%
    ),
    /* núcleo oscuro (obsidiana) */
    radial-gradient(circle at 50% 50%,
      rgba(10,12,18,.95) 0%,
      rgba(16,21,33,.85) 58%,
      rgba(10,12,18,.92) 100%
    );

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(159,183,255,.18),
    0 0 0 1px rgba(163,22,45,.12) inset,
    0 0 18px rgba(159,183,255,.10),
    0 0 22px rgba(163,22,45,.10);
  filter: saturate(1.05) contrast(1.05);
}

/* “Aureola” irregular alrededor del sello */
.site-title a:after{
  content:"";
  position:absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  pointer-events:none;
  opacity: .60;

  background:
    conic-gradient(from 210deg,
      transparent 0 18%,
      rgba(159,183,255,.14) 18% 26%,
      transparent 26% 44%,
      rgba(163,22,45,.12) 44% 54%,
      transparent 54% 100%
    ),
    radial-gradient(circle at 30% 30%, rgba(163,22,45,.10), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(159,183,255,.10), transparent 62%);

  filter: blur(10px);
}

/* Hover: el sello “late” (sin animación agresiva) */
.site-title a:hover{
  color: #d0183a !important;
  text-shadow:
    0 0 10px rgba(163,22,45,.55),
    0 0 30px rgba(163,22,45,.22),
    0 0 46px rgba(159,183,255,.14);
}

/* Opcional: reduce el sello en móvil si el header se aprieta */
@media (max-width: 640px){
  .site-title a{
    padding-left: 48px !important;
    letter-spacing: .08em !important;
  }
  .site-title a:before{
    width: 32px; height: 32px; left: 8px;
  }
  .site-title a:after{
    width: 46px; height: 46px; left: 0px;
  }
}

/* =========================================================
   ARCANE SEAL — VISIBILITY & AUTHORITY PASS
   Final tuning for Nightfall Dominion identity
   ========================================================= */

/* 1) Aumentamos autoridad del título */
.site-title a{
  color: #c01838 !important; /* carmesí vivo, no neón */
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;

  text-shadow:
    0 0 10px rgba(163,22,45,.55),
    0 0 26px rgba(163,22,45,.30),
    0 0 46px rgba(159,183,255,.18),
    0 2px 0 rgba(0,0,0,.65); /* ancla visual */
}

/* 2) Sello ritual: más claro + más contraste */
.site-title a:before{
  filter: saturate(1.25) contrast(1.35) !important;

  box-shadow:
    0 0 0 1px rgba(159,183,255,.28),
    0 0 0 1px rgba(163,22,45,.20) inset,
    0 0 24px rgba(159,183,255,.18),
    0 0 30px rgba(163,22,45,.22),
    0 0 60px rgba(163,22,45,.12);
}

/* 3) Aureola exterior: más presente pero irregular */
.site-title a:after{
  opacity: .85 !important;

  background:
    conic-gradient(from 200deg,
      transparent 0 14%,
      rgba(159,183,255,.20) 14% 24%,
      transparent 24% 42%,
      rgba(163,22,45,.22) 42% 56%,
      transparent 56% 100%
    ),
    radial-gradient(circle at 28% 32%, rgba(163,22,45,.18), transparent 62%),
    radial-gradient(circle at 72% 64%, rgba(159,183,255,.18), transparent 66%);

  filter: blur(14px);
}

/* 4) Hover: activación ritual (muy sutil, nada exagerado) */
.site-title a:hover{
  color: #e01f46 !important;

  text-shadow:
    0 0 14px rgba(163,22,45,.75),
    0 0 36px rgba(163,22,45,.42),
    0 0 64px rgba(159,183,255,.22),
    0 2px 0 rgba(0,0,0,.75);
}

/* =========================================================
   NFD — HTML-like Landing Composition for Gutenberg
   (Hero split + pills + chips + cover card)
   ========================================================= */

/* HERO split container */
.nfd-hero-split{
  max-width: var(--nfd-max);
  margin: 0 auto 18px;
  padding: 26px !important;
  border-radius: var(--nfd-radius) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(1000px 420px at 15% 20%, rgba(159,183,255,.12), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(163,22,45,.10), transparent 62%),
    linear-gradient(180deg, rgba(16,21,33,.82), rgba(10,12,18,.70));
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
}

/* Irregular “veil line” inside hero */
.nfd-hero-split:after{
  content:"";
  position:absolute;
  left: 26px;
  right: 26px;
  top: 84px;
  height: 2px;
  border-radius: 999px;
  opacity: .85;
  background: linear-gradient(90deg, transparent, rgba(159,183,255,.25), rgba(163,22,45,.18), transparent);
}

/* PILL */
.nfd-pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
  font-size: .92rem;
  margin: 0 0 12px;
}
.nfd-pill:before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(159,183,255,.35);
  box-shadow: 0 0 12px rgba(159,183,255,.18), 0 0 14px rgba(163,22,45,.10);
}

/* HERO TITLE */
.nfd-hero-title{
  font-family: 'Cinzel Decorative', serif !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.03;
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 0 16px rgba(159,183,255,.10),
    0 0 22px rgba(163,22,45,.14),
    0 2px 0 rgba(0,0,0,.65);
  font-size: clamp(34px, 4.2vw, 64px);
}

/* Lead text */
.nfd-hero-lead{
  color: rgba(255,255,255,.74);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 58ch;
  margin-bottom: 18px;
}

/* CTA row */
.nfd-cta-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 14px;
}
.nfd-cta-row .wp-block-button__link{
  padding: 10px 16px;
}

/* Chips */
.nfd-chip-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.nfd-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
  font-size: .90rem;
}
.nfd-chip:before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(163,22,45,.35);
  box-shadow: 0 0 10px rgba(163,22,45,.14);
}

/* Cover card (right column) */
.nfd-cover-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 30px 90px rgba(0,0,0,.50);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.nfd-cover-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(180px 120px at 16% 14%, rgba(159,183,255,.16), transparent 70%),
    radial-gradient(220px 140px at 84% 22%, rgba(163,22,45,.14), transparent 72%);
  filter: blur(14px);
}
.nfd-cover-card img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 16px;
}

/* Sections */
.nfd-section{
  max-width: var(--nfd-max);
  margin: 18px auto;
  padding: 18px;
  border-radius: var(--nfd-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(16,21,33,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}

/* Mobile stacking refinements */
@media (max-width: 900px){
  .nfd-hero-split{
    padding: 18px !important;
  }
  .nfd-hero-split:after{
    top: 72px;
    left: 18px;
    right: 18px;
  }
}

/* Ajuste fino: hero split más aireado */
.nfd-hero-split{
  min-height: 520px;
  display: flex;
  align-items: center;
}

/* Asegura que la columna derecha “respire” */
.nfd-cover-card{
  max-width: 420px;
  margin-left: auto;
}

/* Chips más discretos (como en la comp) */
.nfd-chip{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  font-size: .88rem;
}

/* =========================================================
   HEADER FIX — Branding (logo/title) + Menu bar
   Pegar al FINAL de nfd-veil.css
   ========================================================= */

/* 1) Header como barra real (no transparente accidental) */
.site-header{
  background: rgba(10,12,18,.84) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Si GeneratePress separa nav del header */
.main-navigation{
  background: rgba(10,12,18,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* 2) Asegura que el contenedor del header se vea y tenga altura */
.site-header .inside-header,
.main-navigation .inside-navigation{
  background: transparent !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* 3) Branding visible: título/logo con autoridad ritual */
.site-branding{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  opacity: 1 !important;
}

/* Si el tema le mete opacidad al logo/título */
.site-title, .site-title a,
.site-logo, .site-logo a{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Título del sitio: carmesí + halo */
.site-title a{
  color: #c01838 !important;
  font-family: 'Cinzel Decorative', serif !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  text-shadow:
    0 0 10px rgba(163,22,45,.55),
    0 0 26px rgba(163,22,45,.30),
    0 0 46px rgba(159,183,255,.16),
    0 2px 0 rgba(0,0,0,.75);
}

/* Sello ritual junto al título (si ya lo tenías, esto lo hace más visible) */
.site-title a:before{
  opacity: 1 !important;
  filter: saturate(1.25) contrast(1.35) !important;
  box-shadow:
    0 0 0 1px rgba(159,183,255,.28),
    0 0 0 1px rgba(163,22,45,.22) inset,
    0 0 26px rgba(159,183,255,.20),
    0 0 34px rgba(163,22,45,.24) !important;
}
.site-title a:after{
  opacity: .85 !important;
  filter: blur(14px) !important;
}

/* 4) Menú: alineación derecha + mejor espaciado */
.main-navigation .main-nav{
  display: flex !important;
  justify-content: flex-end !important;
}
.main-navigation .main-nav ul{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Links del menú: estilo “capsule” sobrio */
.main-navigation .main-nav ul li a{
  color: rgba(255,255,255,.84) !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Hover */
.main-navigation .main-nav ul li a:hover{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow:
    0 0 0 1px rgba(159,183,255,.14),
    0 0 18px rgba(159,183,255,.08);
}

/* Item activo: marca lunar + carmesí */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a{
  background: rgba(163,22,45,.12) !important;
  box-shadow:
    0 0 0 1px rgba(163,22,45,.22),
    0 0 22px rgba(163,22,45,.10),
    0 0 26px rgba(159,183,255,.08);
}

/* 5) Fix: si tu logo se estaba “perdiendo” por ser muy oscuro */
.site-title a:hover{
  color: #e01f46 !important;
  text-shadow:
    0 0 14px rgba(163,22,45,.75),
    0 0 36px rgba(163,22,45,.42),
    0 0 64px rgba(159,183,255,.22),
    0 2px 0 rgba(0,0,0,.85);
}

/* 6) Mobile: menú no se rompe */
@media (max-width: 768px){
  .site-header .inside-header,
  .main-navigation .inside-navigation{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .main-navigation .main-nav{
    justify-content: center !important;
  }
}

/* =========================================================
   NFD MENU — Clean dark bar + ritual underline
   (GeneratePress)
   ========================================================= */

/* Barra superior (nav) */
.main-navigation{
  background: rgba(10,12,18,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}

/* Contenedor interno: altura y alineación */
.main-navigation .inside-navigation{
  padding: 14px 22px !important;
  display: flex !important;
  align-items: center !important;
}

/* Alinea items a la derecha (si tu logo está a la izquierda) */
.main-navigation .main-nav{
  margin-left: auto !important;
}

/* Lista horizontal con “aire” */
.main-navigation .main-nav ul{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Links */
.main-navigation .main-nav ul li a{
  position: relative;
  color: rgba(255,255,255,.82) !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .03em;
  background: transparent !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Hover: cápsula suave (no chillona) */
.main-navigation .main-nav ul li a:hover{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 18px rgba(159,183,255,.08);
}

/* Subrayado ritual (hover) */
.main-navigation .main-nav ul li a:after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,210,227,.55),
    rgba(159,183,255,.18),
    transparent
  );
  transition: opacity .15s ease;
}
.main-navigation .main-nav ul li a:hover:after{
  opacity: .85;
}

/* Item activo: cápsula + subrayado más presente */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a{
  color: rgba(255,255,255,.94) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow:
    0 0 0 1px rgba(201,210,227,.16),
    0 0 20px rgba(159,183,255,.10);
}
.main-navigation .main-nav ul li.current-menu-item > a:after,
.main-navigation .main-nav ul li.current_page_item > a:after,
.main-navigation .main-nav ul li.current-menu-ancestor > a:after{
  opacity: 1;
}

/* Si tienes "Home" y no quieres que se vea distinto */
.main-navigation .main-nav ul li:first-child a{
  margin-left: 0;
}

/* MOBILE: menú centrado cuando se pliega */
@media (max-width: 768px){
  .main-navigation .inside-navigation{
    padding: 10px 14px !important;
  }
  .main-navigation .main-nav{
    margin-left: 0 !important;
  }
}

/* =========================================================
   Menu item special: El Velo
   ========================================================= */

.main-navigation .main-nav ul li a[title="El Velo"],
.main-navigation .main-nav ul li a[href*="el-velo"]{
  font-style: italic;
  opacity: .9;
}

/* Hover más etéreo */
.main-navigation .main-nav ul li a[title="El Velo"]:hover,
.main-navigation .main-nav ul li a[href*="el-velo"]:hover{
  background: rgba(159,183,255,.06) !important;
  box-shadow:
    0 0 14px rgba(159,183,255,.10);
}

/* =========================================================
   FIX: Single Deck (Mazo) - controlar tamaño de la imagen
   ========================================================= */

/* Afecta SOLO a la vista individual del CPT mazo */
.single-nfd_deck .entry-content .wp-post-image,
.single-nfd_deck .entry-content img.attachment-full,
.single-nfd_deck .entry-content img.size-full,
.single-nfd_deck .entry-content img.attachment-large,
.single-nfd_deck .entry-content img.size-large{
  width: min(420px, 100%) !important;   /* límite de ancho */
  max-height: 70vh !important;         /* límite de alto */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 18px !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

/* Si la imagen está dentro del "featured image" del tema */
.single-nfd_deck .post-image img,
.single-nfd_deck .featured-image img{
  width: min(420px, 100%) !important;
  max-height: 70vh !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto 18px !important;
  display:block !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

/* Opcional: centra el bloque superior del post para que no se vea "blog" */
.single-nfd_deck .inside-article{
  max-width: 980px;
  margin: 0 auto;
}

.single-nfd_deck .entry-header{
  margin-bottom: 12px !important;
}
.single-nfd_deck .entry-title{
  margin-bottom: 10px !important;
}

.nfd-deck-page{
  padding: 36px 16px;
}

.nfd-deck-shell{
  max-width: 1180px;
  margin: 0 auto;
  background: rgba(10,12,18,.78);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  padding: 22px;
}

.nfd-deck-hero{
  padding: 10px 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.nfd-deck-kicker{
  font-size: 12px;
  letter-spacing: .18em;
  opacity: .7;
}

.nfd-deck-title{
  margin: 8px 0 10px;
}

.nfd-deck-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nfd-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
}

.nfd-deck-layout{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  padding: 18px 10px 10px;
}

.nfd-cover-frame{
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

.nfd-cover-img{
  width: 100% !important;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 14px;
  display: block;
}

.nfd-deck-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.nfd-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

.nfd-btn:hover{
  background: rgba(255,255,255,.14);
}

.nfd-btn-ghost{
  background: transparent;
}

.nfd-deck-summary{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

.nfd-deck-cards{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.nfd-card-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.nfd-card-list li{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.nfd-qty{
  opacity: .85;
  font-weight: 700;
}

.nfd-muted{
  opacity: .75;
}

@media (max-width: 980px){
  .nfd-deck-layout{
    grid-template-columns: 1fr;
  }
}

/* Limitar imagen destacada en cualquier single (temporal) */
.single .inside-article .post-image img,
.single .inside-article .featured-image img,
.single .inside-article img.wp-post-image{
  width: min(460px, 100%) !important;
  max-height: 70vh !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 18px !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

