/* ==========================================================================
   DON LIBRO — Tema "Literatura Urbana"
   Ciudad, neón y palabras: el skyline como cuerpo tipográfico de la feria.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap');

:root{
  /* Paleta Literatura Urbana */
  --plum:        #3F194D;
  --violet:      #68097E;
  --magenta:     #C91C7A;
  --coral:       #E8675C;
  --gold:        #FFCA06;

  --bg-0:        #180a1f;
  --bg-1:        var(--plum);
  --bg-2:        var(--violet);

  --ink:         #F8ECF6;
  --ink-dim:     #CBAAC7;
  --ink-faint:   #9C7FA0;

  --glass-bg:      rgba(248, 236, 246, 0.055);
  --glass-bg-hi:   rgba(248, 236, 246, 0.10);
  --glass-border:  rgba(248, 236, 246, 0.16);
  --glass-border-hi: rgba(255, 202, 6, 0.55);

  --grad-brand: linear-gradient(120deg, var(--violet) 0%, var(--magenta) 50%, var(--coral) 100%);
  --grad-gold:  linear-gradient(120deg, var(--coral) 0%, var(--gold) 100%);
  --grad-sky:   radial-gradient(60% 50% at 50% 0%, rgba(255,202,6,0.35) 0%, rgba(232,103,92,0.20) 32%, rgba(201,28,122,0.12) 55%, rgba(63,25,77,0) 78%);

  --shadow-soft: 0 10px 30px rgba(15, 4, 20, 0.45);
  --shadow-glow: 0 0 0 1px var(--glass-border), 0 20px 40px -12px rgba(201, 28, 122, 0.45);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --font-display: 'Urbanist', sans-serif;
  --font-body: 'Urbanist', sans-serif;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.4em;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h1{ font-weight: 800; }
h2{ font-weight: 800; }
h3{ font-weight: 700; }

p{ color: var(--ink-dim); margin: 0 0 1em; }
a{ color: var(--gold); text-decoration: none; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

::selection{ background: var(--magenta); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bg-0); }
::-webkit-scrollbar-thumb{ background: var(--grad-brand); border-radius: 10px; }

/* ==========================================================================
   FONDO ANIMADO — Skyline urbano en movimiento + resplandor de cielo
   ========================================================================== */
.city-bg{
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    var(--grad-sky),
    linear-gradient(180deg, var(--bg-0) 0%, var(--plum) 55%, #24102c 100%);
  overflow: hidden;
  pointer-events: none;
}

.city-bg .stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,.35) 0, transparent 60%);
  opacity: .8;
}

.skyline-layer{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 200%;
  height: auto;
  display: flex;
  will-change: transform;
}
.skyline-layer svg{ width: 50%; height: auto; flex: 0 0 50%; display:block; }

.skyline-back{ opacity: .55; bottom: 8vh; animation: driftLeft 130s linear infinite; }
.skyline-mid{  opacity: .75; bottom: 2vh; animation: driftLeft 85s linear infinite; }
.skyline-front{opacity: 1; bottom: -2vh; animation: driftLeft 55s linear infinite; }

@keyframes driftLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.window{ animation: flicker 9s ease-in-out infinite; }
.window.d2{ animation-delay: 1.6s; }
.window.d3{ animation-delay: 3.4s; }
.window.d4{ animation-delay: 5.2s; }
@keyframes flicker{
  0%, 100%{ opacity: .85; }
  50%{ opacity: .5; }
}

@media (prefers-reduced-motion: reduce){
  .skyline-back, .skyline-mid, .skyline-front, .window{ animation: none !important; }
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 100;
  padding: 14px 0;
}
.site-header .bar{
  display:flex; align-items:center; justify-content: space-between;
  gap: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 999px;
  padding: 10px 12px 10px 20px;
  box-shadow: var(--shadow-soft);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:800; font-size: 1.25rem;
  color: var(--ink);
}
.brand img{
  height: 40px; width: 40px; border-radius: 50%;
  object-fit: cover; object-position: center 15%;
  box-shadow: 0 0 0 2px var(--glass-border-hi);
}
.brand:hover{ color: var(--gold); }

.nav-links{
  display:flex; gap: 4px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  display:block; padding: 10px 16px; border-radius: 999px;
  color: var(--ink-dim); font-weight:600; font-size: .95rem;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--bg-0); background: var(--grad-gold);
  transform: translateY(-1px);
}

.menu-toggle{
  display:none; background: var(--grad-brand); border:none; color:#fff;
  width:44px; height:44px; border-radius: 50%; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.menu-toggle span{ width: 18px; height:2px; background:#fff; border-radius:2px; }

@media (max-width: 860px){
  .brand img{ height:32px; width:32px; }
  .nav-links{
    position: fixed; inset: 84px 16px auto 16px;
    flex-direction: column; gap: 6px;
    background: rgba(24,10,31,0.92);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 14px;
    transform: translateY(-14px) scale(.98);
    opacity: 0; visibility: hidden;
    transition: all .3s ease;
    box-shadow: var(--shadow-soft);
  }
  .nav-links.open{ transform: translateY(0) scale(1); opacity:1; visibility: visible; }
  .nav-links a{ text-align:center; }
  .menu-toggle{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding: 90px 0 60px;
  text-align:center;
  position: relative;
}
.hero.has-photo{ padding-top: 0; }
.hero.has-photo .photo-wrap{
  position: relative;
  height: 62vh; min-height: 380px; max-height: 620px;
  margin-bottom: 50px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.hero.has-photo .photo-wrap img{
  width:100%; height:100%; object-fit: cover; object-position: center 30%;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: luminosity;
}
.hero.has-photo .photo-wrap::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(24,10,31,0.15) 0%, rgba(24,10,31,0.55) 60%, var(--bg-0) 100%),
    linear-gradient(120deg, rgba(104,9,126,0.65), rgba(201,28,122,0.5) 45%, rgba(255,202,6,0.35) 100%);
  mix-blend-mode: multiply;
}
.hero.has-photo .photo-wrap::before{
  content:'';
  position:absolute; inset:0; z-index:2;
  background: var(--grad-sky);
  mix-blend-mode: screen;
  opacity:.8;
}
.hero.has-photo .hero-text{
  position: relative; margin-top: -170px; z-index: 3;
}
@media (max-width: 640px){
  .hero.has-photo .hero-text{ margin-top: -120px; }
  .hero.has-photo .photo-wrap{ height: 48vh; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight:700; margin-bottom: 18px;
  text-shadow: 0 2px 10px rgba(10,4,14,.75), 0 0 22px rgba(10,4,14,.55);
}
.eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background: var(--grad-gold); box-shadow: 0 0 12px var(--gold); }

.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip:text; color: transparent;
  -webkit-text-stroke: 1px rgba(10,4,14,0.55);
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 24px rgba(201,28,122,.35));
  text-shadow: 0 2px 18px rgba(10,4,14,.55), 0 0 36px rgba(10,4,14,.35);
}
.hero .lead{
  max-width: 620px; margin: 0 auto 30px; font-size: 1.15rem; color: var(--ink-dim);
  text-shadow: 0 2px 14px rgba(10,4,14,.75), 0 0 22px rgba(10,4,14,.5);
}
.hero-meta{
  display:inline-flex; flex-wrap:wrap; gap: 14px; justify-content:center;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px; border-radius: 999px; border: none; cursor:pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .02em;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  text-decoration:none;
}
.btn-primary{
  background: var(--grad-gold); color: var(--bg-0);
  box-shadow: 0 10px 30px -8px rgba(255,202,6,.55);
}
.btn-primary:hover{ transform: translateY(-3px); filter: brightness(1.06); }
.btn-outline{
  background: transparent; color: var(--ink);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ==========================================================================
   TARJETAS DE VIDRIO (glass cards)
   ========================================================================== */
.card{
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  transform-style: preserve-3d;
  overflow: hidden;
}
.card::before{
  content:'';
  position:absolute; inset:-1px;
  padding:1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,202,6,.55), rgba(201,28,122,.15) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-8px);
  border-color: var(--glass-border-hi);
  background: var(--glass-bg-hi);
  box-shadow: var(--shadow-glow);
}
.card:hover::before{ opacity: 1; }

.card .icon{
  width:52px; height:52px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--grad-brand); margin-bottom: 18px;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px -6px rgba(201,28,122,.6);
}

.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.section{ padding: 70px 0; position:relative; }
.section-head{ text-align:center; max-width: 640px; margin: 0 auto 46px; }
.section-head h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section-head p{ font-size: 1.05rem; }

.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   PROGRAMACIÓN (agenda / timeline)
   ========================================================================== */
.day-tabs{ display:flex; gap:10px; justify-content:center; margin-bottom: 34px; flex-wrap:wrap; }
.day-tabs button{
  padding: 10px 22px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass-bg); color: var(--ink-dim); font-family: var(--font-display);
  font-weight:700; cursor:pointer; transition: all .25s ease;
}
.day-tabs button.active, .day-tabs button:hover{
  background: var(--grad-brand); color:#fff; border-color: transparent;
}

.timeline{ position: relative; max-width: 820px; margin: 0 auto; }
.timeline::before{
  content:''; position:absolute; left: 86px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--gold), var(--magenta), transparent);
}
.t-item{ display:grid; grid-template-columns: 70px 1fr; gap: 20px; margin-bottom: 18px; position:relative; }
.t-time{ text-align:right; font-family: var(--font-display); font-weight:800; color: var(--gold); font-size: .95rem; padding-top: 14px; }
.t-dot{ position:absolute; left: 82px; top: 22px; width:10px; height:10px; border-radius:50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.t-card{ padding: 16px 20px; }
.t-card h4{ margin:0 0 4px; font-size: 1.02rem; }
.t-card span.place{ color: var(--ink-faint); font-size: .85rem; }
.day-panel{ display:none; }
.day-panel.active{ display:block; }

@media (max-width: 640px){
  .timeline::before{ left: 46px; }
  .t-item{ grid-template-columns: 34px 1fr; }
  .t-time{ display:none; }
  .t-dot{ left: 42px; }
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.form-card{ max-width: 560px; margin: 0 auto; padding: 40px; }
.field{ margin-bottom: 20px; text-align:left; }
.field label{
  display:block; margin-bottom: 8px; font-weight:700; font-size: .85rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--gold);
}
.field input, .field select{
  width:100%; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border); background: rgba(0,0,0,.22);
  color: var(--ink); font-family: var(--font-body); font-size: .95rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field input::placeholder{ color: var(--ink-faint); }
.field input:focus, .field select:focus{
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,202,6,.18);
}
.field select option{ background: var(--bg-1); color: var(--ink); }
.hint{ font-size: .8rem; color: var(--ink-faint); margin-top:-12px; margin-bottom: 18px; }

/* Selector de archivo — comprobante de pago */
.field input[type="file"]{ display:none; }
.file-upload{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  text-align:center;
  padding: 30px 20px;
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,.18);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.file-upload:hover, .file-upload.is-dragover{
  border-color: var(--gold);
  background: rgba(255,202,6,.06);
}
.file-upload:active{ transform: scale(0.99); }
.file-upload .file-upload-icon{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--grad-brand); font-size:1.2rem;
  box-shadow: 0 8px 20px -6px rgba(201,28,122,.55);
}
.file-upload .file-upload-title{ font-weight:700; color: var(--ink); font-size:.95rem; }
.file-upload .file-upload-sub{ font-size:.8rem; color: var(--ink-faint); }
.file-upload.has-file{ border-style: solid; border-color: rgba(102,214,150,.6); background: rgba(102,214,150,.06); }
.file-upload.has-file .file-upload-icon{ background: linear-gradient(120deg,#3fae6f,#66D696); }
.file-upload .file-upload-name{ font-weight:700; color:#66D696; font-size:.88rem; word-break:break-all; padding:0 10px; }

.alert{ padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size:.92rem; }
.alert-error{ background: rgba(232,103,92,.15); border:1px solid rgba(232,103,92,.5); color:#ffd7d1; }
.alert-success{ background: rgba(255,202,6,.13); border:1px solid rgba(255,202,6,.5); color: var(--gold); }

/* Estado cerrado (inscripciones finalizadas) */
.status-box{
  display:flex; flex-direction:column; align-items:center; gap: 14px;
  padding: 50px 30px; text-align:center; max-width: 460px; margin: 0 auto;
}
.status-box svg{ width:70px; height:70px; }

/* ==========================================================================
   ÉXITO
   ========================================================================== */
.success-box{ text-align:center; max-width: 520px; margin: 60px auto; padding: 50px 40px; }
.success-check{
  width:84px; height:84px; border-radius:50%; margin: 0 auto 20px;
  background: var(--grad-gold); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 8px rgba(255,202,6,.12);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ padding: 50px 0 30px; text-align:center; position:relative; }
.site-footer .icons{ list-style:none; display:flex; justify-content:center; gap:14px; padding:0; margin: 0 0 16px; }
.site-footer .icons a{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--ink);
  transition: all .25s ease;
}
.site-footer .icons a:hover{ background: var(--grad-brand); color:#fff; transform: translateY(-4px); border-color: transparent; }
.site-footer .icons svg{ width:18px; height:18px; }
.site-footer p{ font-size:.85rem; color: var(--ink-faint); margin:0; }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.tag{
  display:inline-block; padding: 6px 14px; border-radius:999px; font-size:.75rem;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background: rgba(255,202,6,.12); color: var(--gold); border:1px solid rgba(255,202,6,.35);
  margin: 4px;
}