:root { --ink:#302118; --wine:#9a4537; --gold:#e0aa3e; --paper:#f4e7cc; --dark:#18100d; --petrol:#24747a; --coral:#cf654f; --sage:#708b62; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:Georgia,serif; background:#241713; }
a { color:inherit; }
.cover-page { min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 50% 12%,#73533b 0,#35231b 44%,#160e0b 100%); }
.ambient { position:fixed; inset:0; pointer-events:none; opacity:.2; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.03) 3px 4px); }
.book-stage { min-height:100vh; display:grid; place-items:center; padding:42px 22px; perspective:2200px; }
.book { position:relative; width:min(760px,92vw); min-height:min(880px,calc(100vh - 84px)); transform-style:preserve-3d; filter:drop-shadow(0 35px 28px rgba(0,0,0,.48)); }
.page-edges { position:absolute; inset:10px -12px -10px 12px; border-radius:4px 14px 14px 5px; background:repeating-linear-gradient(#eadbbd 0 3px,#cbb58e 3px 4px); transform:translateZ(-8px); }
.cover { position:absolute; inset:0; overflow:hidden; border-radius:5px 15px 15px 5px; color:#fff8e9; background:linear-gradient(90deg,rgba(17,10,8,.9),rgba(24,14,10,.57) 53%,rgba(20,12,9,.3)),url('hero-barrio-90s-v3.png') center/cover; border-left:18px solid #4d211b; box-shadow:inset 3px 0 #9d5541,inset -2px 0 rgba(255,255,255,.16); transform-origin:left center; transform-style:preserve-3d; transition:transform 1.05s cubic-bezier(.64,.02,.25,1),filter .8s; }
.cover::after { content:""; position:absolute; inset:18px; border:1px solid rgba(224,180,91,.6); border-radius:2px 10px 10px 2px; pointer-events:none; }
.cover-shade { position:absolute; inset:0; background:linear-gradient(115deg,transparent 55%,rgba(255,220,150,.14)); }
.cover-content { position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column; padding:54px clamp(32px,8vw,78px) 42px; }
.edition,.index-label,.open-hint { font:700 11px/1.2 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.edition { margin:0; color:#8fd0cb; }
.cover h1 { margin:72px 0 8px; font-size:clamp(58px,10vw,98px); line-height:.92; letter-spacing:-.045em; text-transform:uppercase; text-shadow:3px 4px #5b291f; }
.cover h1 span { display:block; }
.cover h1 span + span { margin-top:.12em; }
.cover h1 span:first-child { color:#fff3d3; }
.cover h1 span:last-child { color:#e8b84f; }
.tagline { margin:18px 0 0; color:#79c4c1; font:900 clamp(17px,2.8vw,27px)/1 Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.cover-intro { max-width:480px; margin:30px 0 22px; font-size:18px; line-height:1.45; }
.open-area { width:min(360px,100%); margin-top:auto; }
.open-book { position:relative; display:block; width:100%; padding:17px 50px; color:#fff9eb; background:var(--coral); border:1px solid #efaa91; border-radius:3px; box-shadow:0 8px 20px rgba(0,0,0,.28); font:900 14px/1 Arial,sans-serif; letter-spacing:.1em; text-align:center; text-transform:uppercase; text-decoration:none; }
.open-book:hover,.open-book:focus-visible { color:#fff; background:#e17a60; transform:translateX(5px); }
.open-hint { margin:12px 0 0; color:#dacaa9; text-align:left; }
.cover-author { margin-top:25px; padding-top:18px; border-top:1px solid rgba(229,199,127,.35); text-align:center; }
.cover-author strong { display:block; color:#8fd0cb; font:700 13px/1 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.cover-author span { display:block; margin-top:8px; color:#ffd995; font-size:13px; font-style:italic; letter-spacing:.025em; }
.book.is-opening .cover { transform:rotateY(-112deg); filter:brightness(.8); }
.book.is-opening { filter:drop-shadow(25px 35px 25px rgba(0,0,0,.55)); }
.story-page { min-height:100vh; background:linear-gradient(90deg,var(--petrol) 0 14px,transparent 14px),radial-gradient(circle at 50% 0,#fffaf0,#ead8b7 72%); }
.story-shell { width:min(1040px,94vw); margin:0 auto; padding:28px 0 50px; }
.book-nav { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; color:#fff6e4; font:700 12px Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.book-nav a { padding:10px 14px; text-decoration:none; background:var(--petrol); border-radius:999px; }
.book-nav a:hover { background:#319198; }
.paper { position:relative; min-height:82vh; padding:clamp(28px,6vw,68px); background:linear-gradient(90deg,rgba(36,116,122,.08),transparent 9%,transparent 91%,rgba(207,101,79,.06)),#fff9ea; box-shadow:0 24px 55px rgba(0,0,0,.38),inset 0 0 70px rgba(128,83,34,.07); border-radius:4px 12px 12px 4px; }
.paper::before { content:""; position:absolute; left:34px; top:0; bottom:0; width:1px; background:rgba(144,74,55,.2); }
.chapter { color:var(--coral); font:700 11px Arial,sans-serif; letter-spacing:.17em; text-transform:uppercase; }
.paper h1 { max-width:750px; margin:12px 0 28px; padding-bottom:14px; color:#245f63; font-size:clamp(38px,7vw,72px); line-height:.98; letter-spacing:-.035em; border-bottom:4px solid #e0aa3e; }
.story-photo { width:min(470px,50%); float:left; margin:0 38px 22px 0; border:9px solid #fffaf0; box-shadow:0 9px 25px rgba(63,39,24,.24); transform:rotate(-1deg); }
.story-figure { margin:0; }.story-figure img { display:block; width:100%; border:9px solid #fffaf0; box-shadow:0 9px 25px rgba(63,39,24,.24); }.story-figure figcaption { padding:9px 4px 0; color:#80664a; font-size:13px; font-style:italic; line-height:1.35; }.story-figure-main { margin:0 0 30px; }.story-figure-main img { aspect-ratio:3/2; object-fit:cover; }.story-figure-secondary { width:min(360px,43%); float:right; margin:4px 0 24px 35px; transform:rotate(1deg); }
.story-text { font-size:19px; line-height:1.72; }.story-text p { margin:0 0 20px; }.story-text::after { content:""; display:block; clear:both; }
.page-turn { clear:both; display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:42px; padding-top:24px; border-top:1px solid #c9af83; font:700 13px Arial,sans-serif; }.page-turn a { padding:14px; color:#653326; text-decoration:none; border:1px solid #b99866; background:rgba(255,250,236,.55); }.page-turn a:last-child { text-align:right; }
.folio { margin:36px 0 0; text-align:center; color:#8a6b49; font-size:13px; }
.contents-intro { max-width:680px; margin:-8px 0 34px; color:#72533a; font-size:18px; line-height:1.55; }
.contents-list { border-top:1px solid #cbb98e; }.contents-card { display:grid; grid-template-columns:92px minmax(0,1fr) auto; align-items:center; gap:18px; min-height:82px; padding:15px 12px; color:#4d281f; text-decoration:none; border-bottom:1px solid #d6c49c; border-left:6px solid var(--coral); transition:padding .2s,background .2s,transform .2s; }.contents-card:nth-child(2){border-left-color:var(--petrol)}.contents-card:nth-child(3){border-left-color:var(--gold)}.contents-card:nth-child(4){border-left-color:var(--sage)}.contents-card:hover{padding-left:20px;background:#fff2d5;transform:translateX(4px)}.contents-number{display:inline-block;width:max-content;padding:7px 9px;color:#fff;background:var(--coral);border-radius:3px;font:700 10px Arial,sans-serif;letter-spacing:.1em}.contents-card:nth-child(2) .contents-number{background:var(--petrol)}.contents-card:nth-child(3) .contents-number{color:#3b2712;background:var(--gold)}.contents-card:nth-child(4) .contents-number{background:var(--sage)}.contents-card strong{color:#315f61;font-size:21px;line-height:1.2}.contents-card em{color:#8a6443;font-size:13px;font-style:normal;text-align:right}
.reader-callout{margin:44px 0 0;padding:28px clamp(22px,5vw,42px);background:#efe1bd;border:1px solid #ccb27a;border-left:7px solid var(--petrol);box-shadow:inset 0 0 35px rgba(112,72,25,.07)}.reader-callout h2{margin:7px 0 12px;color:#315f61;font-size:clamp(26px,4vw,40px);line-height:1.05}.reader-callout p{max-width:720px;line-height:1.55}.moderation-note{padding:10px 13px;background:rgba(255,255,255,.48);border-left:3px solid var(--coral);font-size:14px}.reader-button,.submit-button{display:inline-block;margin-top:8px;padding:14px 20px;color:#fff9eb;background:var(--coral);border:0;border-radius:3px;text-decoration:none;font:800 12px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.reader-button:hover,.submit-button:hover{background:#b9503d}
.submit-intro{max-width:720px;margin:-8px 0 30px;font-size:18px;line-height:1.6}.memory-form{display:grid;gap:20px;max-width:760px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.memory-form label{display:grid;gap:7px;color:#5a3a29;font:700 13px Arial,sans-serif;letter-spacing:.02em}.memory-form input,.memory-form textarea,.memory-form select{width:100%;padding:13px 14px;color:#302118;background:#fffdf5;border:1px solid #bda77d;border-radius:3px;font:16px Georgia,serif}.memory-form textarea{min-height:240px;resize:vertical;line-height:1.5}.memory-form input:focus,.memory-form textarea:focus,.memory-form select:focus{outline:3px solid rgba(36,116,122,.18);border-color:var(--petrol)}.consent-line{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:10px!important;font-family:Georgia,serif!important;font-weight:normal!important;line-height:1.45}.consent-line input{width:auto;margin-top:3px}.form-help{margin:0;color:#80664a;font-size:13px;line-height:1.45}.form-status{display:none;padding:13px 15px;border-radius:3px;font-size:15px;line-height:1.45}.form-status.show{display:block}.form-status.ok{background:#e5efdc;border:1px solid #8ca477}.form-status.error{background:#f8dfd7;border:1px solid #cf806d}.photo-preview{display:flex;gap:10px;flex-wrap:wrap}.photo-preview span{padding:6px 9px;background:#efe1bd;border-radius:999px;font:12px Arial,sans-serif}
.comments-box{clear:both;margin-top:42px;padding-top:25px;border-top:2px solid #d5bc88}.comments-box h2{color:#315f61;font-size:28px}.comments-list{display:grid;gap:12px;margin:18px 0}.comment-card{padding:15px 17px;background:#fff4dc;border-left:4px solid var(--gold)}.comment-card strong{display:block;margin-bottom:5px;color:#315f61}.comment-card p{margin:0;white-space:pre-wrap;line-height:1.5}.comment-empty{color:#80664a;font-style:italic}.comment-form{display:grid;gap:12px;max-width:620px}.comment-form input,.comment-form textarea{padding:11px 12px;border:1px solid #bda77d;background:#fffdf5;font:15px Georgia,serif}.comment-form textarea{min-height:110px;resize:vertical}
@media(max-width:680px){.book-stage{padding:18px 12px}.book{min-height:calc(100vh - 36px)}.cover-content{padding:35px 26px 28px}.cover h1{margin-top:42px;font-size:clamp(50px,18vw,78px)}.cover-intro{font-size:16px;margin:20px 0 14px}.open-book{padding:15px 18px}.open-hint{font-size:9px}.story-shell{padding-top:14px}.book-nav{font-size:10px}.paper{padding:32px 24px}.paper::before{left:14px}.story-photo{float:none;width:100%;margin:0 0 26px}.story-text{font-size:17px}.page-turn{grid-template-columns:1fr}.page-turn a:last-child{text-align:left}.contents-card{grid-template-columns:64px 1fr;gap:10px;min-height:68px}.contents-card strong{font-size:18px}.contents-card em{display:none}.story-figure-secondary{float:none;width:100%;margin:0 0 26px;transform:none}.form-row{grid-template-columns:1fr}.reader-callout{margin-top:30px;padding:22px 18px}.memory-form textarea{min-height:200px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.cover{transition:none}.book.is-opening .cover{transform:none;opacity:.25}}

/* Archivo de historias y participación */
.archive-page{background:#efe4ce}.archive-page .story-shell{width:min(1120px,94vw)}.archive-page .paper{min-height:auto;border-radius:16px;background:#fffaf0;box-shadow:0 16px 42px rgba(48,33,24,.17)}.archive-page .paper::before{display:none}.archive-paper h1,.form-paper h1,.admin-panel h1{font-size:clamp(42px,7vw,68px)}
.archive-tools{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px 18px;align-items:end;margin:24px 0}.archive-tools label{grid-column:1;color:#315f61;font:700 12px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}.archive-tools input{padding:13px 15px;border:1px solid #bda77d;border-radius:6px;background:#fff;font:16px Georgia,serif}.archive-tools .reader-button{grid-column:2;grid-row:1/3;margin:0}
.archive-page .contents-card{min-height:64px;padding:10px 12px}.contents-main{display:grid;gap:4px}.contents-main small,.story-author{color:#8a6443;font:12px Arial,sans-serif}.archive-footer{display:flex;justify-content:space-between;gap:16px;margin-top:32px;padding-top:18px;border-top:1px solid #d6c49c;color:#80664a;font-size:13px}.archive-footer a{color:#24747a}
.shared-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:28px}.shared-photos img{width:100%;max-height:520px;object-fit:cover;border:7px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.admin-login{display:flex;gap:10px;flex-wrap:wrap}.admin-login input{min-width:280px;padding:12px}.admin-toolbar,.admin-actions{display:flex;gap:10px;margin:12px 0}.admin-toolbar button,.admin-actions button{padding:10px 14px;border:0;border-radius:4px;background:#24747a;color:#fff;cursor:pointer}.admin-actions button:last-child{background:#9a4537}.admin-list{display:grid;gap:18px}.admin-card{padding:18px;background:#f4e7cc;border-left:5px solid #e0aa3e}.admin-card h2{margin:0 0 5px}.admin-meta{font-size:13px}.admin-card textarea{width:100%;min-height:190px;padding:12px;font:16px/1.5 Georgia,serif}
@media(max-width:680px){.archive-tools{grid-template-columns:1fr}.archive-tools .reader-button{grid-column:1;grid-row:auto;text-align:center}.archive-page .contents-card{grid-template-columns:70px 1fr}.archive-footer{flex-direction:column}}

.password-login{align-items:stretch}.password-login input{flex:1 1 260px}.first-access,.password-settings{margin:24px 0;padding:18px;background:#f4e7cc;border-left:5px solid var(--petrol)}.first-access summary,.password-settings summary{color:#245f63;font-weight:bold;cursor:pointer}.first-access .reader-button{margin-top:5px}.password-settings .admin-login{margin-top:16px}.admin-section{margin-top:34px;padding-top:18px;border-top:2px solid #d6c49c}.admin-section>h2{color:#245f63}.admin-section>h2 span{font:13px Arial,sans-serif;color:#9a4537}

.comments-intro{margin:-.65rem 0 1.35rem;color:#80664a;font-size:.92rem;font-style:italic;line-height:1.5}


/* Lista clara y compacta en celulares */
.archive-tools:has(.reader-button:only-child){
  display:block;
}
.archive-tools:has(.reader-button:only-child) .reader-button{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0;
  text-align:center;
}
@media(max-width:680px){
  .archive-page .contents-card{
    grid-template-columns:108px minmax(0,1fr);
    column-gap:10px;
    padding:11px 8px;
  }
  .archive-page .contents-number{
    width:auto;
    white-space:nowrap;
    padding:7px 7px;
    font-size:9px;
    justify-self:start;
  }
  .archive-page .contents-main{
    min-width:0;
  }
  .archive-page .contents-card strong{
    display:block;
    font-size:17px;
    line-height:1.12;
    overflow-wrap:anywhere;
  }
}
@media(max-width:380px){
  .archive-page .contents-card{
    grid-template-columns:100px minmax(0,1fr);
    column-gap:8px;
  }
  .archive-page .contents-card strong{
    font-size:16px;
  }
}