/* POSTALES RENACER · BIBLIOTECA PÚBLICA v1 · 2026-10-04 */
:root{
  --wine:#4b0b0b;
  --wine2:#75141d;
  --blue:#071827;
  --blue2:#0b3553;
  --gold:#d5af45;
  --gold2:#f3dc8c;
  --cream:#fff8ea;
  --paper:#f7ecd8;
  --ink:#2a1a13;
  --muted:#75695e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
img{max-width:100%}
button,a,input{font:inherit}
a{text-decoration:none;color:inherit}
button{cursor:pointer}
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.eyebrow{display:block;color:#b98325;font:800 12px/1 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}

.libraryTopbar{
  position:sticky;top:0;z-index:50;
  min-height:86px;padding:12px clamp(18px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:linear-gradient(110deg,#2e0709 0%,#5c0c14 44%,#081b2b 100%);
  border-bottom:1px solid rgba(213,175,69,.56);
  box-shadow:0 10px 32px rgba(0,0,0,.18)
}
.libraryBrand{display:flex;align-items:center;gap:12px;color:#fff}
.libraryBrand img{width:55px;height:55px;object-fit:cover;border-radius:50%;border:1px solid var(--gold)}
.libraryBrand span{display:flex;flex-direction:column}
.libraryBrand b{font:700 23px/1 Georgia,serif}
.libraryBrand small{margin-top:5px;color:#e8c965;font:700 10px/1 Arial,sans-serif;letter-spacing:.06em}
.libraryNav{display:flex;align-items:center;gap:9px}
.libraryNav a{padding:10px 14px;border-radius:999px;color:#fff7de;font-weight:800;font-size:13px;border:1px solid transparent}
.libraryNav a:hover,.libraryNav .isActive{border-color:rgba(231,199,104,.68);background:rgba(255,255,255,.07)}

.libraryHero{
  position:relative;min-height:620px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  gap:40px;align-items:center;
  padding:clamp(70px,8vw,120px) clamp(24px,7vw,110px);
  background:
    radial-gradient(circle at 20% 20%,rgba(213,175,69,.16),transparent 28%),
    radial-gradient(circle at 78% 36%,rgba(179,44,57,.24),transparent 27%),
    linear-gradient(125deg,#071827 0%,#0b3553 38%,#520b13 74%,#1d0910 100%);
  border-bottom:1px solid rgba(213,175,69,.54);
}
.libraryHeroGhost{
  position:absolute;left:-1%;bottom:-5%;z-index:0;
  color:rgba(255,245,210,.035);
  font:700 clamp(120px,20vw,320px)/.72 Georgia,serif;
  letter-spacing:-.06em;pointer-events:none;white-space:nowrap
}
.libraryHeroCopy{position:relative;z-index:3;max-width:760px}
.libraryHeroCopy .eyebrow{color:#ebcc70}
.libraryHero h1{margin:14px 0 22px;color:#fff7de;font:500 clamp(52px,6vw,88px)/.96 Georgia,serif;letter-spacing:-.03em}
.libraryHero p{max-width:680px;margin:0;color:#eadfce;font-size:clamp(18px,1.6vw,24px);line-height:1.55}
.heroQuickActions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.heroBtn{
  min-height:54px;padding:0 24px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(235,204,112,.72);
  font-weight:800;transition:.18s ease
}
.heroBtnGold{
  color:#392305;
  background:radial-gradient(circle at 28% 16%,rgba(255,255,255,.34),transparent 28%),linear-gradient(180deg,#f2d878 0%,#d1a139 100%);
  box-shadow:0 12px 24px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.70)
}
.heroBtnOutline{color:#fff1c8;background:rgba(255,255,255,.045);border-color:rgba(236,205,117,.72)}
.heroBtn:hover{transform:translateY(-2px)}

.libraryHeroArt{position:relative;z-index:2;height:470px;min-width:0}
.heroCard{
  position:absolute;width:250px;aspect-ratio:4/5;object-fit:cover;border-radius:18px;
  border:1px solid rgba(239,208,117,.82);box-shadow:0 30px 70px rgba(0,0,0,.42)
}
.heroCardA{right:26%;top:2%;transform:rotate(-2deg);z-index:3}
.heroCardB{right:4%;top:18%;transform:rotate(8deg);z-index:2;filter:brightness(.90)}
.heroCardC{right:48%;top:22%;transform:rotate(-9deg);z-index:1;filter:brightness(.85)}

.librarySection{
  position:relative;padding:clamp(70px,7vw,110px) clamp(20px,6vw,90px) 110px;
  background:
    radial-gradient(circle at 90% 4%,rgba(213,175,69,.10),transparent 24%),
    linear-gradient(135deg,#fffaf1 0%,#f6ead6 55%,#edf1f2 100%)
}
.librarySectionHead{max-width:1180px;margin:0 auto 34px;display:flex;align-items:end;justify-content:space-between;gap:30px}
.librarySectionHead h2{max-width:760px;margin:10px 0 0;color:var(--wine);font:500 clamp(42px,5vw,68px)/1 Georgia,serif}
.librarySectionHead p{max-width:420px;margin:0;color:var(--muted);font-size:15px;line-height:1.6}

.libraryToolbar{max-width:1180px;margin:0 auto 20px;display:grid;gap:16px}
.librarySearch{
  height:58px;padding:0 18px;display:flex;align-items:center;gap:12px;
  border:1px solid rgba(183,132,36,.52);border-radius:18px;
  background:rgba(255,255,255,.78);box-shadow:0 12px 26px rgba(80,53,24,.08)
}
.librarySearch svg{width:24px;height:24px;fill:none;stroke:#7a5219;stroke-width:2}
.librarySearch input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#3d2c23;font-size:16px}
.libraryFilters{display:flex;gap:9px;overflow:auto;padding:3px 0 8px;scrollbar-width:none}
.libraryFilters::-webkit-scrollbar{display:none}
.filterChip{
  flex:0 0 auto;min-height:42px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(181,130,33,.62);background:rgba(255,250,237,.86);color:#651116;
  font-weight:800;font-size:13px
}
.filterChip.isActive{background:linear-gradient(180deg,#f0d270,#cf9d31);color:#382105;border-color:#e5c35d;box-shadow:0 7px 15px rgba(105,67,12,.12)}

.libraryStatusRow{max-width:1180px;margin:0 auto 20px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:#75695e;font-size:13px}
.libraryStatusRow button{border:0;background:transparent;color:#6b1116;font-weight:800}

.postcardLibraryGrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.libraryCard{
  position:relative;overflow:hidden;border-radius:20px 20px 34px 20px;
  border:1px solid rgba(186,136,39,.64);background:#fffaf0;
  box-shadow:0 18px 40px rgba(70,44,18,.12);transition:.18s ease
}
.libraryCard:hover{transform:translateY(-3px);box-shadow:0 24px 46px rgba(70,44,18,.17)}
.libraryCard:after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:58px;height:34px;z-index:4;pointer-events:none;
  border-left:1px solid rgba(190,139,39,.46);border-top:1px solid rgba(226,195,111,.64);border-radius:30px 0 32px 0;
  background:linear-gradient(145deg,#f1da91 0%,#c89934 58%,#133b57 100%)
}
.libraryCardImage{display:block;width:100%;padding:0;border:0;background:#f6ead6}
.libraryCardImage img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#f6ead6}
.libraryCardBody{padding:14px 16px 18px;background:linear-gradient(115deg,#fff9e9 0%,#f1dfb4 72%,#e4c77d 100%);border-top:1px solid rgba(198,145,44,.44)}
.libraryCardBody .eyebrow{margin-bottom:7px;color:#7b1417;font-size:10px}
.libraryCardBody h3{margin:0 0 12px;padding-right:44px;color:#4b0b0b;font:600 19px/1.15 Georgia,serif;text-transform:none}
.libraryCardActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-right:36px}
.libraryCardActions button{
  min-height:42px;padding:0 10px;border-radius:999px;font-weight:800;font-size:12px
}
.libraryCardActions button:first-child{border:1px solid #e1ba52;background:linear-gradient(180deg,#efd475,#cea03a);color:#392305}
.libraryCardActions button:last-child{border:1px solid rgba(181,137,42,.58);background:rgba(255,252,241,.76);color:#621317}

.libraryMoreWrap{display:flex;justify-content:center;margin-top:40px}
.loadMoreBtn{
  min-width:min(360px,90vw);min-height:54px;padding:0 24px;border-radius:999px;
  border:1px solid #d9b44f;background:linear-gradient(180deg,#f3d983,#cfa13a);
  color:#3b2305;font-weight:800;box-shadow:0 10px 22px rgba(92,57,10,.12)
}

.emptyState{grid-column:1/-1;padding:70px 20px;text-align:center;color:#75695e}
.emptyState b{display:block;margin-bottom:10px;color:#4b0b0b;font:600 30px/1.15 Georgia,serif}

.libraryMission{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:clamp(60px,7vw,90px) clamp(24px,7vw,110px);
  background:linear-gradient(115deg,#5b0c14 0%,#26070a 46%,#08243a 100%);color:#fff7dd;
  border-top:1px solid rgba(213,175,69,.56)
}
.libraryMission h2{max-width:820px;margin:10px 0 12px;font:500 clamp(38px,4.5vw,64px)/1.02 Georgia,serif}
.libraryMission p{max-width:720px;margin:0;color:#eadfce;line-height:1.6}
.libraryMission .eyebrow{color:#edcd70}

.libraryFooter{min-height:130px;padding:24px clamp(24px,7vw,110px);display:flex;align-items:center;gap:18px;background:#071827;color:#efe5d0;border-top:1px solid rgba(213,175,69,.42)}
.libraryFooter img{width:62px;height:62px;object-fit:cover;border-radius:50%;border:1px solid var(--gold)}
.libraryFooter div{display:flex;flex-direction:column;gap:8px}
.libraryFooter b{font:700 18px/1.1 Georgia,serif}
.libraryFooter span{max-width:700px;color:#cfc4b2;font-size:13px;line-height:1.45}

.postcardModal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}
.postcardModal[hidden]{display:none}
.postcardModalBackdrop{position:absolute;inset:0;background:rgba(3,8,14,.84);backdrop-filter:blur(8px)}
.postcardModalPanel{
  position:relative;z-index:2;width:min(900px,96vw);max-height:94vh;overflow:auto;
  display:grid;grid-template-columns:minmax(280px,520px) minmax(240px,1fr);
  gap:26px;padding:18px;border:1px solid rgba(213,175,69,.72);border-radius:26px;
  background:linear-gradient(145deg,#071827,#102d44 45%,#4c0b12);box-shadow:0 32px 80px rgba(0,0,0,.56)
}
.modalClose{position:absolute;right:12px;top:12px;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(241,215,139,.68);background:rgba(15,18,23,.72);color:#fff;font-size:30px}
.modalImageWrap{display:flex;align-items:center;justify-content:center;min-height:0;background:#03111d;border-radius:18px;overflow:hidden}
.modalImageWrap img{display:block;max-height:84vh;width:100%;object-fit:contain}
.modalInfo{align-self:center;padding:28px 12px 20px;color:#fff4d6}
.modalInfo .eyebrow{color:#e6c564}
.modalInfo h2{margin:12px 0 26px;font:500 clamp(34px,4vw,54px)/1 Georgia,serif}
.modalActions{display:grid;gap:10px}
.modalActions .heroBtn{width:100%}

@media(max-width:900px){
  .libraryHero{grid-template-columns:1fr;min-height:auto;padding-top:80px}
  .libraryHeroArt{height:390px;margin-top:-10px}
  .heroCard{width:220px}
  .heroCardA{right:35%;top:0}.heroCardB{right:8%;top:14%}.heroCardC{right:58%;top:20%}
  .librarySectionHead{align-items:start;flex-direction:column}
  .postcardLibraryGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .libraryMission{align-items:flex-start;flex-direction:column}
}
@media(max-width:680px){
  .libraryTopbar{min-height:72px;padding:10px 16px}
  .libraryBrand img{width:46px;height:46px}
  .libraryBrand b{font-size:19px}
  .libraryBrand small{font-size:8px}
  .libraryNav a:not(.isActive){display:none}
  .libraryNav .isActive{font-size:11px;padding:9px 11px}
  .libraryHero{padding:58px 20px 42px}
  .libraryHero h1{font-size:clamp(46px,14vw,64px)}
  .libraryHero p{font-size:17px}
  .heroQuickActions{display:grid}
  .libraryHeroArt{height:300px;margin-top:8px}
  .heroCard{width:165px;border-radius:14px}
  .heroCardA{right:32%;top:0}.heroCardB{right:0;top:20%}.heroCardC{right:61%;top:24%}
  .librarySection{padding:58px 16px 78px}
  .librarySectionHead h2{font-size:clamp(38px,11vw,50px)}
  .libraryToolbar{gap:13px}
  .libraryFilters{margin-right:-16px;padding-right:16px}
  .postcardLibraryGrid{grid-template-columns:1fr;gap:20px}
  .libraryCard{max-width:520px;margin:0 auto;width:100%}
  .libraryCardBody h3{font-size:20px}
  .libraryMission{padding:58px 20px}
  .libraryFooter{padding:24px 20px}
  .libraryFooter img{width:52px;height:52px}
  .libraryFooter span{font-size:11px}
  .postcardModal{padding:10px}
  .postcardModalPanel{grid-template-columns:1fr;gap:12px;padding:12px;max-height:96vh}
  .modalImageWrap img{max-height:67vh}
  .modalInfo{padding:10px 4px 4px}
  .modalInfo h2{margin:8px 0 14px;font-size:30px}
}