@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Roboto+Mono&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --rojo:#b60000;
  --rosa:#ff1e90;
  --violeta:#6A0DAD;
  --plateado:rgba(220,220,230,0.85);
  --gris:#e3e3e3;
  --negro:#000;
  --negro2:#0b060e;
  --negro3:#0f0a13;

  /* === Marco Catedral (tuneable) === */
  --frame-thickness-side: 160px;   /* ancho laterales */
  --frame-thickness-top:  120px;   /* alto top/bottom */
  --tile-height:          200px;   /* alto de cada estampa top/bottom */
  --tile-width:           160px;   /* ancho de cada estampa laterales */
  --frame-opacity:        .42;     /* opacidad general del marco */
  --fade-inner:           75%;     /* desvanecido hacia adentro */
}

/* ===== Cursor custom (opcionales: cursor-katana.png y cursor-cross.png) ===== */
body{
  background:var(--negro);color:var(--gris);font-family:'Roboto Mono',monospace;
  cursor: url('cursor-katana.png') 16 16, crosshair;
}
a, button, .enter-btn, .nav-link, .post-link, .poem-read, .ext-link, .read-mode-btn, .reader-close {
  cursor: url('cursor-cross.png') 12 12, pointer;
}

/* ===== NAV + LINKS VIVOS ===== */
header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(6px);
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.6));
  border-bottom:1px solid #600000;
}
.nav ul{list-style:none;display:flex;gap:2rem;justify-content:center;padding:12px 16px}
.nav-link{
  position:relative;display:inline-block;padding:4px 2px;text-decoration:none;
  color:var(--rojo);font-family:'UnifrakturCook',cursive;font-size:1.25rem;letter-spacing:.2px;
  transition:transform .2s,color .2s,text-shadow .2s;
  background-image:
    linear-gradient(90deg,transparent,transparent),
    linear-gradient(90deg,var(--rosa),var(--violeta));
  background-size:0% 2px,0% 2px;background-repeat:no-repeat;background-position:0 100%,0 100%;
  text-shadow:0 0 4px rgba(166,0,255,.25)
}
.nav-link:hover{
  color:var(--plateado);transform:translateY(-1px) skewX(-1deg);
  text-shadow:0 0 8px var(--violeta),0 0 14px var(--rosa);
  background-size:100% 2px,35% 2px;animation:menu-glitch .5s steps(2,end) 1
}
.nav-link:focus-visible{outline:2px dashed var(--rosa);outline-offset:3px}
.nav-link.active{color:var(--plateado);text-shadow:0 0 10px var(--violeta),0 0 18px var(--rosa);background-size:100% 2px,100% 2px}
@keyframes menu-glitch{0%{transform:translateX(0)}35%{transform:translateX(1px)}70%{transform:translateX(-1px)}100%{transform:translateX(0)}}

/* ===== FADE-IN (reveal on scroll) ===== */
.reveal{
  opacity:0; transform:translateY(12px) scale(.98); filter:blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  transition-delay: var(--d, 0s);
}
.reveal.in{ opacity:1; transform:none; filter:none; }

/* ===== LAYOUT SECCIONES ===== */
.section{padding:64px 0}
.section-dark{background:var(--negro2)}
.section-darker{background:var(--negro3)}
.wrap{width:min(1100px,92%);margin:0 auto}
.section-title{
  font-family:'UnifrakturCook',cursive;font-size:2.1rem;color:var(--plateado);
  text-shadow:0 0 12px rgba(106,13,173,.5);margin-bottom:8px
}
.section-sub{color:#bfbfbf;margin-bottom:28px}

/* ===== POSTS (CRÓNICAS) ===== */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.post{
  position:relative;padding:18px 18px 14px;border-radius:10px;background:rgba(0,0,0,.35);
  border:1px solid rgba(166,0,255,.25);
  box-shadow:inset 0 0 0 1px rgba(255,30,144,.08), 0 0 18px rgba(106,13,173,.15);
  overflow:hidden;transition:transform .18s ease, box-shadow .18s ease
}
.post::before, .post::after{content:"";position:absolute;inset:0;pointer-events:none}
.post::before{
  background:
    linear-gradient(45deg, rgba(255,30,144,.08) 25%, transparent 25%) 0 0/8px 8px,
    linear-gradient(-45deg, rgba(106,13,173,.08) 25%, transparent 25%) 0 0/8px 8px;
  mix-blend-mode:screen;opacity:.4
}
.post::after{
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), inset 0 0 24px rgba(106,13,173,.25);
  border-radius:10px
}
.post:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,30,144,.15), 0 0 24px rgba(106,13,173,.25)}
.post-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.post-date{font-size:.85rem;opacity:.8}
.post-tag{font-size:.75rem;padding:2px 8px;border:1px solid rgba(182,0,0,.5);color:#ffdede;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.tag-idea{border-color:rgba(255,30,144,.55);color:#ffe6f5}
.post-title{font-family:'UnifrakturCook',cursive;font-size:1.35rem;margin:6px 0 8px;color:#ddd}
.post-body p{line-height:1.6;margin:8px 0}
.post-meta{margin-top:10px;display:flex;gap:14px;align-items:center;justify-content:flex-start;opacity:.9}
.post-link{color:var(--rosa);text-decoration:none;position:relative;padding-bottom:2px}
.post-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,var(--rosa),var(--violeta));transform:scaleX(0);transform-origin:left;transition:transform .2s}
.post-link:hover::after{transform:scaleX(1)}

/* ===== HERO ===== */
.hero{
  position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden
}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, rgba(20,0,20,.35) 0%, rgba(0,0,0,.9) 80%);z-index:0}

/* MARCOS CSS por defecto (sin imágenes) */
.frame{
  position:absolute;pointer-events:none;z-index:1;opacity:.95;
  filter:drop-shadow(0 0 8px var(--violeta));mix-blend-mode:screen
}
.frame-left,.frame-right{
  top:0;height:100%;width:120px;
  background:
    linear-gradient(to bottom, rgba(220,220,230,.25), rgba(220,220,230,.25)) 50% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(45deg, rgba(106,13,173,.35) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(-45deg, rgba(182,0,0,.35) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(to bottom, rgba(255,30,144,.18) 0 1px, transparent 1px 9px)
}
.frame-left{left:0}
.frame-right{right:0;transform:scaleX(-1)}
.frame-top,.frame-bottom{
  left:0;width:100%;height:120px;
  background:
    linear-gradient(to right, rgba(220,220,230,.25), rgba(220,220,230,.25)) 0 50% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(106,13,173,.35) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(-90deg, rgba(182,0,0,.35) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(to right, rgba(255,30,144,.18) 0 1px, transparent 1px 9px)
}
.frame-top{top:0}
.frame-bottom{bottom:0;transform:scaleY(-1)}

/* ===== Marcos con catedral/borde (si existe el archivo) ===== */
.frame-left, .frame-right { width: var(--frame-thickness-side); }
.frame-top,  .frame-bottom{ height: var(--frame-thickness-top); }

.has-frame-image .frame-left,
.has-frame-image .frame-right,
.has-frame-image .frame-top,
.has-frame-image .frame-bottom{
  background: none !important;
}
.has-frame-image .frame-left::before,
.has-frame-image .frame-right::before,
.has-frame-image .frame-top::before,
.has-frame-image .frame-bottom::before{
  content:""; position:absolute; inset:0;
  opacity: var(--frame-opacity);
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.15) brightness(1.25) hue-rotate(275deg) saturate(1.1);
}

/* Laterales: repetición con espacio y máscara de desvanecido */
.has-frame-image .frame-left::before{
  background: url('catedral.png') center/var(--tile-width) auto space repeat-y;
  -webkit-mask-image: linear-gradient(to right, black var(--fade-inner), transparent 100%);
          mask-image: linear-gradient(to right, black var(--fade-inner), transparent 100%);
}
.has-frame-image .frame-right::before{
  background: url('catedral.png') center/var(--tile-width) auto space repeat-y;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, black var(--fade-inner), transparent 100%);
          mask-image: linear-gradient(to left, black var(--fade-inner), transparent 100%);
}

/* Superior/Inferior: repetición con espacio y máscara vertical */
.has-frame-image .frame-top::before{
  background: url('catedral.png') center/auto var(--tile-height) space repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, black var(--fade-inner), transparent 100%);
          mask-image: linear-gradient(to bottom, black var(--fade-inner), transparent 100%);
}
.has-frame-image .frame-bottom::before{
  background: url('catedral.png') center/auto var(--tile-height) space repeat-x;
  -webkit-mask-image: linear-gradient(to top, black var(--fade-inner), transparent 100%);
          mask-image: linear-gradient(to top, black var(--fade-inner), transparent 100%);
}

/* Aura sutil para integrar con el glow general */
.has-frame-image .frame::before{ box-shadow: inset 0 0 26px rgba(106,13,173,.22); }

/* ===== KATANA ===== */
.katana{
  position:relative;height:450px;width:auto;
  filter:drop-shadow(0 0 25px var(--violeta)) drop-shadow(0 0 15px var(--rojo)) drop-shadow(0 0 35px rgba(0,0,0,.85));
  animation:glitch 2.5s infinite;z-index:2
}
@keyframes glitch{
  0%{transform:translate(0,0);filter:drop-shadow(0 0 25px var(--violeta)) drop-shadow(0 0 15px var(--rojo))}
  20%{transform:translate(-3px,1px) rotate(-.5deg);filter:drop-shadow(0 0 28px var(--rosa))}
  50%{transform:translate(2px,-2px) rotate(.5deg);filter:drop-shadow(0 0 22px var(--rojo))}
  70%{transform:translate(-2px,3px) rotate(-.5deg);filter:drop-shadow(0 0 30px var(--violeta))}
  100%{transform:translate(0,0);filter:drop-shadow(0 0 25px var(--violeta)) drop-shadow(0 0 15px var(--rojo))}
}

/* ===== TITULAR + BOTÓN ===== */
.hero h1{
  font-family:'UnifrakturCook',cursive;font-size:2rem;color:var(--violeta);
  margin:18px 16px 20px;z-index:2;text-shadow:0 0 10px rgba(106,13,173,.6)
}
.enter-btn{
  padding:10px 22px;border:1px solid var(--violeta);color:var(--violeta);background:transparent;
  font-family:'Roboto Mono',monospace;text-decoration:none;transition:transform .2s, box-shadow .2s, color .2s, background .2s;
  z-index:2;position:relative;overflow:hidden
}
.enter-btn:hover{color:#000;background:linear-gradient(90deg,var(--violeta),var(--rosa));box-shadow:0 0 18px var(--violeta),0 0 26px var(--rosa);transform:translateY(-1px)}
.enter-btn.link-ritual::after{
  content:"";position:absolute;top:0;left:-120%;width:120%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg)
}
.enter-btn.link-ritual:hover::after{animation:sweep .55s linear 1}
@keyframes sweep{to{left:120%}}

/* ===== RELICARIO (CÓDICE) ===== */
.section-codex{background:linear-gradient(to bottom, var(--negro2), var(--negro3))}
.relicario-actions{display:flex;justify-content:flex-end;margin-bottom:14px}
.read-mode-btn{
  color:var(--plateado);text-decoration:none;border:1px solid rgba(166,0,255,.35);padding:6px 12px;border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease
}
.read-mode-btn:hover{color:#000;background:linear-gradient(90deg,var(--violeta),var(--rosa));box-shadow:0 0 16px rgba(106,13,173,.35);transform:translateY(-1px)}

.codex-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.poem{
  position:relative;padding:22px 20px 18px;background:rgba(0,0,0,.35);
  border:1px solid rgba(166,0,255,.28);
  box-shadow:inset 0 0 0 1px rgba(255,30,144,.08), 0 0 26px rgba(106,13,173,.18);
  border-radius:12px;overflow:hidden;transition:transform .18s, box-shadow .18s
}
.poem::before, .poem::after{content:"";position:absolute;inset:0;pointer-events:none}
.poem::before{
  background:
    radial-gradient(circle at 10% 0%, rgba(106,13,173,.2), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(255,30,144,.18), transparent 45%),
    linear-gradient(45deg, rgba(255,30,144,.08) 25%, transparent 25%) 0 0/8px 8px,
    linear-gradient(-45deg, rgba(106,13,173,.08) 25%, transparent 25%) 0 0/8px 8px;
  mix-blend-mode:screen;opacity:.6
}
.poem::after{box-shadow:inset 0 0 40px rgba(0,0,0,.6), inset 0 0 24px rgba(106,13,173,.25);border-radius:12px}
.poem:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,30,144,.15), 0 0 30px rgba(106,13,173,.26)}
.corner{position:absolute;width:16px;height:16px;transform:rotate(45deg);border:1px solid rgba(160,0,255,.6);background: radial-gradient(circle, rgba(255,30,144,.6), transparent 60%);filter:drop-shadow(0 0 6px rgba(106,13,173,.7))}
.corner.tl{top:10px;left:10px}.corner.tr{top:10px;right:10px}.corner.bl{bottom:10px;left:10px}.corner.br{bottom:10px;right:10px}
.poem-header{margin-bottom:10px}
.poem-title{font-family:'UnifrakturCook',cursive;font-size:1.5rem;color:#e8e3ff;text-shadow:0 0 10px rgba(106,13,173,.5)}
.poem-meta{margin-top:4px;font-size:.8rem;color:#c9c2d7;opacity:.9}.poem-meta span{color:#ffe6f5}
.orn-divider{--line:linear-gradient(90deg,transparent,rgba(160,0,255,.75),rgba(255,30,144,.75),transparent);position:relative;display:flex;align-items:center;justify-content:center;margin:12px 0 14px;color:#d7c5ff;text-shadow:0 0 8px rgba(106,13,173,.6)}
.orn-divider::before,.orn-divider::after{content:"";height:1px;flex:1;background:var(--line)}.orn-divider::before{margin-right:8px}.orn-divider::after{margin-left:8px}
.poem-body{line-height:1.85;letter-spacing:.02em}.verso{margin:6px 0;color:#efeafc}
.dropcap{float:left;font-family:'UnifrakturCook',cursive;font-size:2.2rem;line-height:1;margin:2px 8px 0 0;color:#a07bff;text-shadow:0 0 10px rgba(106,13,173,.6)}
.poem-more{margin-top:10px}
.poem-more summary{cursor:pointer;list-style:none;color:var(--rosa);border-bottom:1px dashed rgba(255,30,144,.5);display:inline-block;padding-bottom:2px}
.poem-more[open] summary{color:var(--plateado)}
.poem-long{margin-top:8px}
.poem-foot{margin-top:12px;display:flex;gap:12px;align-items:center;color:#cbbbe2;opacity:.95;justify-content:space-between}
.poem-read{text-decoration:none;color:var(--plateado);border:1px solid rgba(166,0,255,.35);padding:6px 10px;border-radius:8px}
.poem-read:hover{color:#000;background:linear-gradient(90deg,var(--violeta),var(--rosa));box-shadow:0 0 16px rgba(106,13,173,.35);transform:translateY(-1px)}

/* ===== OVERLAYS ===== */
.reader{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background: radial-gradient(circle at 50% 45%, rgba(20,0,20,.6) 0%, rgba(0,0,0,.95) 80%);backdrop-filter: blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
.reader:target{opacity:1;pointer-events:auto}
.reader-close{position:fixed;top:16px;right:18px;z-index:25;color:var(--plateado);text-decoration:none;font-size:1.2rem;border:1px solid rgba(166,0,255,.35);padding:6px 10px;border-radius:10px}
.reader-close:hover{color:#000;background:linear-gradient(90deg,var(--violeta),var(--rosa))}
.reader-wrap{position:relative;width:min(760px,92%);max-height:80vh;overflow:auto;padding:28px 26px 22px;border-radius:14px;background:rgba(0,0,0,.55);border:1px solid rgba(166,0,255,.35);box-shadow:0 0 30px rgba(106,13,173,.35), inset 0 0 0 1px rgba(255,30,144,.1)}
.reader-title{font-family:'UnifrakturCook',cursive;color:#e8e3ff;font-size:1.8rem;text-align:center;margin-bottom:12px;text-shadow:0 0 10px rgba(106,13,173,.5)}
.reader-body{line-height:1.95;text-align:center;font-size:1.05rem}.reader-body p{margin:8px 0;color:#efeafc}
.reader-nav{display:flex;justify-content:space-between;margin-top:16px}
.reader-nav a{color:var(--plateado);text-decoration:none;border-bottom:1px solid rgba(166,0,255,.35);padding-bottom:2px}
.reader-nav a:hover{color:#000;background:linear-gradient(90deg,var(--violeta),var(--rosa))}
.reader-wrap .corner{position:absolute;width:18px;height:18px;transform:rotate(45deg);border:1px solid rgba(160,0,255,.6);background: radial-gradient(circle, rgba(255,30,144,.6), transparent 60%);filter:drop-shadow(0 0 6px rgba(106,13,173,.7))}
.reader-wrap .corner.tl{top:12px;left:12px}.reader-wrap .corner.tr{top:12px;right:12px}.reader-wrap .corner.bl{bottom:12px;left:12px}.reader-wrap .corner.br{bottom:12px;right:12px}

/* ===== LECTURA CONTINUA (SCROLL-SNAP) ===== */
.reader-continuo{position:fixed;inset:0;z-index:20;background: radial-gradient(circle at 50% 45%, rgba(20,0,20,.6) 0%, rgba(0,0,0,.95) 80%);opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:stretch;justify-content:center}
.reader-continuo:target{opacity:1;pointer-events:auto}
.reader-close.fixed{position:fixed;top:16px;right:18px}
.snap-track{height:100vh;width:100%;overflow-y:auto;scroll-snap-type:y mandatory}
.snap-poem{min-height:100vh;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;padding:32px 0}
.snap-wrap{position:relative;width:min(760px,92%);padding:28px 26px 22px;border-radius:14px;background:rgba(0,0,0,.55);border:1px solid rgba(166,0,255,.35);box-shadow:0 0 30px rgba(106,13,173,.35), inset 0 0 0 1px rgba(255,30,144,.1);text-align:center}
.snap-wrap h3{font-family:'UnifrakturCook',cursive;color:#e8e3ff;font-size:1.8rem;margin-bottom:12px;text-shadow:0 0 10px rgba(106,13,173,.5)}
.snap-wrap p{color:#efeafc;line-height:1.95;margin:8px 0}

/* ===== LINKS EXTERNOS (Portales) ===== */
.links-ext{display:flex;flex-wrap:wrap;gap:14px;padding-top:8px}
.ext-link{color:var(--plateado);text-decoration:none;border:1px solid rgba(166,0,255,.35);padding:6px 12px;border-radius:999px;transition:transform .15s, box-shadow .15s, color .15s}
.ext-link:hover{color:#000;background:linear-gradient(90deg,var(--violeta),var(--rosa));box-shadow:0 0 16px rgba(106,13,173,.35);transform:translateY(-1px)}

/* === Parallax suave (borde catedral) === */
/* variables que el JS va a ir actualizando */
:root{
  --p-side: 0px;     /* desplaza las estampas laterales en Y */
  --p-topx: 0px;     /* desplaza las estampas superior/inferior en X */
}

/* aseguramos que los fondos respondan al parallax y optimizamos */
.has-frame-image .frame-left::before,
.has-frame-image .frame-right::before{
  background-position: center var(--p-side) !important;
  will-change: background-position;
}
.has-frame-image .frame-top::before,
.has-frame-image .frame-bottom::before{
  background-position: var(--p-topx) center !important;
  will-change: background-position;
}

/* fallback por accesibilidad: si el usuario pide menos movimiento, desactiva */
@media (prefers-reduced-motion: reduce){
  :root{ --p-side: 0px; --p-topx: 0px; }
}