/* ==========================================================================
   J. L. R. Fesser — hoja de estilos principal
   Tema oscuro, tipografía serif. Responsive (móvil y escritorio).
   ========================================================================== */

:root{
  --bg:        #0a0e13;
  --bg-2:      #0c1116;
  --bg-3:      #0e141b;
  --ink:       #e9e6df;
  --ink-dim:   #bcb8ae;
  --muted:     #7e8793;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.06);
  --accent:    #c75c3c;
  --accent-2:  #e07a57;
  --maxw:      1180px;
  --gutter:    clamp(20px, 5vw, 48px);
  --serif:     "EB Garamond", Georgia, "Times New Roman", serif;
  --display:   "Playfair Display", Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.12; margin:0; }
p{ margin:0 0 1em; }

/* accesibilidad: saltar al contenido */
.skip{ position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:10px 16px; z-index:2000; }
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* Etiqueta pequeña en versalitas con guion de acento */
.eyebrow{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color:var(--muted); font-weight:600; margin:0 0 1.2rem;
}
.rule::after{
  content:""; display:block; width:48px; height:2px; background:var(--accent);
  margin-top:1.4rem;
}

/* Enlace tipo "LEER →" */
.cta{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.6rem;
  text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; font-weight:600;
  color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--accent);
  transition:color .2s, border-color .2s;
}
.cta .arrow{ color:var(--accent); transition:transform .25s; }
.cta:hover{ color:var(--accent-2); }
.cta:hover .arrow{ transform:translateX(5px); }
.arrow{ display:inline-block; }

/* ===================== Cabecera / navegación ============================= */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:100;
  padding-block:26px;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{
  font-family:var(--display); font-size:1.35rem; letter-spacing:.3em;
  text-transform:uppercase; white-space:nowrap;
}
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:600;
  color:var(--ink-dim); padding-bottom:4px; position:relative; transition:color .2s;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--ink); }
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent);
}

/* Selector de idioma (sin banderas) */
.lang{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink-dim);
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:600; padding:7px 12px; border-radius:2px;
  transition:border-color .2s, color .2s;
}
.lang-btn:hover{ border-color:var(--accent); color:var(--ink); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:180px; z-index:200;
  background:var(--bg-2); border:1px solid var(--line); border-radius:4px;
  padding:6px; display:none; box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.lang-menu.open{ display:block; }
.lang-menu a{
  display:block; padding:9px 12px; border-radius:3px; font-size:.95rem;
  color:var(--ink-dim); letter-spacing:.02em;
}
.lang-menu a:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.lang-menu a.current{ color:var(--accent-2); }
.lang-menu .sep{ height:1px; background:var(--line); margin:6px 4px; }
.lang-menu .group{ font-size:.64rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--muted); padding:8px 12px 4px; }

/* Botón de menú móvil */
.menu-toggle{ display:none; background:transparent; border:0; color:var(--ink);
  cursor:pointer; padding:6px; }
.menu-toggle svg{ width:26px; height:26px; }

/* ============================ Hero ====================================== */
.hero{ position:relative; min-height:88vh; display:flex; align-items:center;
  border-bottom:1px solid var(--line); overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(90deg, var(--bg) 0%, rgba(10,14,19,.92) 34%, rgba(10,14,19,.45) 62%, rgba(10,14,19,.65) 100%),
    var(--hero-img, none);
  background-size:cover; background-position:center right;
}
.hero__bg::after{ /* viñeta inferior */
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--bg) 0%, rgba(10,14,19,0) 30%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; padding-block:140px 90px; }
.hero__inner{ max-width:620px; }
.hero__eyebrow{
  text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; font-weight:600;
  color:var(--ink-dim); margin-bottom:1.6rem; display:flex; gap:.9em; flex-wrap:wrap;
}
.hero__eyebrow span{ color:var(--muted); }
.hero h1{
  font-size:clamp(2.7rem, 7vw, 4.6rem); letter-spacing:-.01em; margin-bottom:1.6rem;
}
.hero__sub{ font-size:1.18rem; color:var(--ink-dim); max-width:30em; line-height:1.6; }

/* ===================== Sección destacada ================================ */
.section{ padding-block:clamp(56px, 8vw, 92px); border-bottom:1px solid var(--line); }
.featured .grid{
  display:grid; grid-template-columns:1.05fr 1.15fr .8fr; gap:clamp(24px,4vw,56px);
  align-items:center;
}
.featured__text h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:1rem; }
.featured__text p{ color:var(--ink-dim); max-width:26em; }
.featured__img{ position:relative; }
.featured__img img{ width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:2px;
  filter:grayscale(.15) contrast(1.02); }
.latest{ border-left:1px solid var(--line); padding-left:clamp(20px,3vw,40px); align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; }
.latest h3{ font-size:1.5rem; margin:.4rem 0 .5rem; }
.latest__meta{ color:var(--muted); font-style:italic; font-size:1.02rem; }

/* ===================== Ficción (informativo) ============================ */
.fiction__intro{ max-width:46em; color:var(--ink-dim); font-size:1.12rem; margin-bottom:2.6rem; }
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,36px); }
.card{ border-top:1px solid var(--line); padding-top:1.4rem; }
.card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:1rem; }

/* ===================== Selected Works =================================== */
.selected{ position:relative; overflow:hidden; }
.selected__bg{ position:absolute; top:0; right:0; width:46%; height:100%; z-index:0;
  background-image:linear-gradient(90deg, var(--bg) 0%, rgba(10,14,19,.2) 60%), var(--works-img,none);
  background-size:cover; background-position:center; opacity:.55; pointer-events:none; }
.selected .wrap{ position:relative; z-index:2; }
.works{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:2.4rem; }
.work{ padding:0 clamp(16px,2.4vw,34px); border-left:1px solid var(--line); min-height:120px; }
.work:first-child{ border-left:0; padding-left:0; }
.work__status{ text-transform:uppercase; letter-spacing:.16em; font-size:.64rem;
  color:var(--accent-2); font-weight:600; margin-bottom:.7rem; }
.work h3{ font-size:1.35rem; margin-bottom:.3rem; }
.work__meta{ color:var(--muted); font-size:.96rem; margin-bottom:1rem; }
.work .arrow{ color:var(--accent); font-size:1.1rem; }
.work.disabled{ opacity:.55; }
.work.disabled .arrow{ color:var(--muted); }

/* ============================ About ===================================== */
.about .grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px);
  align-items:start; }
.about__photo{ position:relative; }
.about__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px;
  filter:grayscale(.2) contrast(1.02); border:1px solid var(--line); }
.about h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:.4rem; }
.about h3{ font-size:1.05rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); font-weight:600; font-family:var(--serif); margin:2rem 0 .9rem; }
.about__bio p{ color:var(--ink-dim); font-size:1.12rem; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:.4rem; }
.chip{ border:1px solid var(--line); border-radius:40px; padding:7px 15px;
  font-size:.86rem; color:var(--ink-dim); }

/* =========================== Contacto =================================== */
.contact .grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px);
  align-items:start; }
.contact__intro{ color:var(--ink-dim); font-size:1.12rem; max-width:24em; }
.contact__follow{ margin-top:2rem; }
.contact__follow a{ display:inline-flex; align-items:center; gap:.6em; color:var(--ink-dim);
  border-bottom:1px solid var(--line); padding-bottom:5px; transition:color .2s,border-color .2s; }
.contact__follow a:hover{ color:var(--ink); border-color:var(--accent); }

form.contact-form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); font-weight:600; }
.field input, .field textarea{
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  font-family:var(--serif); font-size:1.04rem; padding:13px 15px; border-radius:3px;
  width:100%; transition:border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); background:var(--bg-3); outline:none; }
.field textarea{ min-height:150px; resize:vertical; }
/* Campo trampa para bots: invisible para humanos */
.hp-field{ position:absolute !important; left:-9999px !important; top:-9999px !important;
  width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.btn{
  justify-self:start; cursor:pointer; background:var(--accent); color:#fff; border:0;
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.16em; font-weight:600;
  font-size:.78rem; padding:14px 30px; border-radius:3px; transition:background .2s, transform .1s;
}
.btn:hover{ background:var(--accent-2); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:default; }
.form-note{ font-size:.86rem; color:var(--muted); margin-top:4px; }
.form-msg{ padding:12px 15px; border-radius:3px; font-size:.98rem; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:rgba(90,160,110,.15); border:1px solid rgba(90,160,110,.4); color:#bfe3c8; }
.form-msg.err{ background:rgba(199,92,60,.14); border:1px solid rgba(199,92,60,.4); color:#f0b6a2; }

/* ============================ Footer ==================================== */
.site-footer{ position:relative; overflow:hidden; background:var(--bg-2);
  padding-block:clamp(44px,6vw,72px); }
.site-footer__bg{ position:absolute; top:0; right:0; width:40%; height:100%; z-index:0;
  background-image:linear-gradient(90deg, var(--bg-2) 0%, rgba(12,17,22,.3) 70%), var(--works-img,none);
  background-size:cover; background-position:center; opacity:.45; pointer-events:none; }
.site-footer .wrap{ position:relative; z-index:2; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.footer-tag{ max-width:20em; }
.footer-tag .rule::after{ margin-top:0; margin-bottom:1.4rem; }
.footer-tag p{ color:var(--ink-dim); font-size:1.06rem; }
.footer-tag .by{ color:var(--muted); font-size:.82rem; letter-spacing:.24em;
  text-transform:uppercase; margin-top:1.2rem; }
.footer-col h4{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.18em;
  font-size:.7rem; color:var(--muted); font-weight:700; margin-bottom:1.1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-col a, .footer-col span{ color:var(--ink-dim); font-size:.98rem; transition:color .2s; }
.footer-col a:hover{ color:var(--ink); }
.footer-col .soon{ color:var(--muted); font-size:.82rem; }
.footer-col .arrow{ color:var(--accent); display:inline-block; margin-top:.4rem; }
.footer-bottom{ border-top:1px solid var(--line); margin-top:clamp(32px,4vw,52px);
  padding-top:1.4rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--muted); font-size:.82rem; }

/* ===================== Easter egg (oculto) ============================== */
#demiurge-overlay{
  position:fixed; inset:0; z-index:3000; display:none;
  background:rgba(4,6,9,.94); align-items:center; justify-content:center; text-align:center;
  padding:30px; cursor:pointer; animation:fade .9s ease;
}
#demiurge-overlay.show{ display:flex; }
#demiurge-overlay .egg{ max-width:620px; }
#demiurge-overlay .egg .k{ font-family:var(--serif); text-transform:uppercase;
  letter-spacing:.5em; color:var(--accent); font-size:.8rem; margin-bottom:1.4rem; }
#demiurge-overlay .egg h2{ font-size:clamp(2.2rem,6vw,3.4rem); color:var(--ink); margin-bottom:1.2rem; }
#demiurge-overlay .egg p{ color:var(--ink-dim); font-style:italic; }
#demiurge-overlay .egg small{ color:var(--muted); display:block; margin-top:2rem; letter-spacing:.2em;
  text-transform:uppercase; font-size:.66rem; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.eclipse-trigger{ cursor:default; }

/* ============================ RESPONSIVE ================================ */
@media (max-width: 1000px){
  .featured .grid{ grid-template-columns:1fr; }
  .latest{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:1.6rem; }
  .featured__img{ order:-1; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-tag{ grid-column:1 / -1; }
}
@media (max-width: 760px){
  body{ font-size:17px; }
  .nav{ position:fixed; inset:0 0 0 auto; width:min(80vw,320px); z-index:300;
    flex-direction:column; align-items:flex-start; gap:6px; background:var(--bg-2);
    border-left:1px solid var(--line); padding:90px 28px 28px; transform:translateX(100%);
    transition:transform .3s ease; }
  .nav.open{ transform:translateX(0); }
  .nav a{ font-size:.9rem; padding:12px 0; width:100%; border-bottom:1px solid var(--line-soft); }
  .nav .lang{ margin-top:16px; }
  .lang-menu{ right:auto; left:0; }
  .menu-toggle{ display:block; z-index:400; position:relative; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:250; display:none; }
  .nav-backdrop.show{ display:block; }
  .hero{ min-height:92vh; }
  .hero .wrap{ padding-block:120px 70px; }
  .cards3{ grid-template-columns:1fr; }
  .works{ grid-template-columns:1fr; }
  .work{ border-left:0; border-top:1px solid var(--line); padding:1.4rem 0 0; min-height:0; }
  .work:first-child{ border-top:0; }
  .about .grid, .contact .grid{ grid-template-columns:1fr; }
  .about__photo{ max-width:300px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 460px){
  .footer-grid{ grid-template-columns:1fr; }
  .hero__eyebrow{ font-size:.66rem; }
}

/* ===================== Página de Escritos (lista) ======================= */
.page-head{ padding:150px 0 10px; }
.page-head .eyebrow{ margin-bottom:1rem; }
.page-head h1{ font-size:clamp(2.4rem,6vw,3.6rem); margin-bottom:1rem; }
.page-head p{ color:var(--ink-dim); font-size:1.14rem; max-width:34em; }

.writings-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px);
  padding-block:clamp(36px,5vw,60px) clamp(56px,8vw,90px); }
.wcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--bg-2); transition:border-color .2s, transform .2s; }
.wcard:hover{ border-color:var(--accent); transform:translateY(-3px); }
.wcard__cover{ aspect-ratio:3/4; width:100%; object-fit:cover; background:var(--bg-3);
  filter:grayscale(.12); }
.wcard__body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.wcard__meta{ font-size:.68rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); margin-bottom:.7rem; }
.wcard h2{ font-size:1.4rem; line-height:1.2; margin-bottom:.4rem; }
.wcard__sub{ color:var(--muted); font-style:italic; font-size:.98rem; margin-bottom:.8rem; }
.wcard__excerpt{ color:var(--ink-dim); font-size:1rem; flex:1; }
.wcard .cta{ margin-top:1.2rem; }
.writings-empty{ padding:60px 0 120px; color:var(--muted); font-size:1.1rem; }

@media (max-width: 900px){ .writings-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .writings-grid{ grid-template-columns:1fr; } .page-head{ padding-top:120px; } }

/* Respetar "reducir movimiento" */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}