:root{--sidebar:121px;--header:80px;--red:#f00;--green:#396;}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Times New Roman",serif;color:#000}body{background:url('assets/wood004.JPG') repeat}
a{color:#0000ee}.site{min-height:100vh;display:grid;grid-template-rows:80px 1fr;grid-template-columns:121px 1fr}.top{grid-column:1/3;display:flex;align-items:center;justify-content:center;overflow:hidden}.logo{white-space:nowrap}.logo img{width:50px;height:50px;vertical-align:middle}.side{grid-row:2;padding:7px 5px;text-align:center;min-height:calc(100vh - 80px)}.side .home{font-family:Arial,Helvetica,sans-serif;font-weight:bold;color:#f00;text-decoration:underline;cursor:pointer}.side .bar{width:68px;height:8px;margin:17px auto}.nav a{display:block;margin:21px 0;font-size:16px}.clock{width:94px;background:#000;color:#fff;font:11px Verdana,Arial,sans-serif;text-align:center;border:2px inset #ddd;padding:4px 2px;margin:28px auto 0}.main{grid-row:2;grid-column:2;overflow:auto;padding:8px 18px 40px;min-width:0}.view{max-width:1100px;margin:0 auto;text-align:center}.section-title{color:#f00;font:bold 48px "Courier New",monospace;margin:18px 0 36px}.intro{font:bold 16px "Courier New",monospace;max-width:900px;margin:0 auto 28px;line-height:1.4}.home-image{max-width:min(624px,95%);height:auto;display:block;margin:24px auto 0}.counter-wrap{margin:34px auto 0}.counter-label{font:12px Verdana,sans-serif;margin-bottom:5px}.counter{display:inline-flex;background:#111;border:2px inset #777;padding:3px;gap:2px}.counter span{display:inline-block;min-width:19px;padding:2px 3px;background:linear-gradient(#222,#050505,#222);color:#f4f4f4;font:bold 19px "Courier New",monospace;border:1px solid #555;text-shadow:0 0 2px #fff}.counter-note{font:10px Arial,sans-serif;margin-top:5px;color:#333}.photo-index{width:75%;min-width:360px;margin:auto}.photo-index a{display:block;margin:8px}.subhead{font:bold 16px "Courier New",monospace;color:#396;margin:28px 0 12px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:16px;align-items:start;max-width:930px;margin:auto}.thumb{border:0;background:transparent;padding:0;cursor:pointer}.thumb img{max-width:100px;max-height:100px;object-fit:contain;display:block;margin:auto}.missing-thumb{width:100px;height:75px;margin:auto;border:1px dashed #555;display:flex;align-items:center;justify-content:center;font:10px Arial,sans-serif;background:rgba(255,255,255,.28)}.gallery-status{font:12px Arial,sans-serif;margin:-22px 0 25px}.member-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 70px;max-width:620px;margin:auto}.member-link{display:flex;align-items:center;justify-content:center;gap:12px;min-height:72px;font-size:28px;cursor:pointer;color:#0000ee;text-decoration:underline}.member-link img{max-height:62px;max-width:45px}.profile img{max-height:340px;max-width:95%}.profile p{max-width:750px;margin:14px auto}.visitors{display:grid;grid-template-columns:repeat(4,1fr);gap:9px 18px;width:85%;margin:auto}.visitors a{cursor:pointer}.tracks,.videos{max-width:850px;margin:auto}.track,.video-item{margin:16px auto}.track audio{width:min(520px,95%);display:block;margin:8px auto}.video-item video{width:min(620px,95%);max-height:460px;background:#000;margin-top:8px}.warn{font:12px Arial,sans-serif;background:rgba(255,255,255,.4);padding:8px 12px;display:inline-block}.modal{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;z-index:50;padding:30px}.modal.open{display:flex}.modal img{max-width:95vw;max-height:86vh;box-shadow:0 0 0 1px #aaa}.modal .close{position:absolute;right:20px;top:14px;color:white;font:bold 34px Arial;cursor:pointer}.modal .caption{position:absolute;bottom:8px;color:white;font:14px Arial}.gallery-nav{position:absolute;inset:0;pointer-events:none}.gallery-nav button{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:white;border:1px solid #aaa;font-size:38px;padding:8px 12px;cursor:pointer}.gallery-nav .prev{left:12px}.gallery-nav .next{right:12px}.back-link{margin-bottom:20px;display:inline-block}.mobile-menu{display:none}
@media(max-width:700px){.site{display:block}.top{height:72px}.logo{transform:scale(.62);transform-origin:center}.side{min-height:0;padding:5px 8px;border-bottom:1px solid rgba(0,0,0,.25)}.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}.nav a{margin:4px 0}.side .bar,.clock{display:none}.side .home{display:block;margin:4px}.main{padding:8px 10px 30px}.section-title{font-size:36px;margin-bottom:25px}.visitors{grid-template-columns:repeat(2,1fr);width:100%}.member-grid{grid-template-columns:1fr;gap:3px}.photo-index{width:100%;min-width:0}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}}

/* v0.3 */
.top{padding-left:121px}.side-counter{margin:28px auto 0}.download-link{display:inline-block;margin-top:5px}.video-link{margin:10px 0 24px}.videos .video-item{padding:8px 0}.clock{display:none}
@media(max-width:700px){.top{padding-left:0}.side-counter{display:none}}

/* V0.4.4 */
.side-counter{margin:28px auto 0}
.side-counter .counter{padding:2px;gap:1px}
.side-counter .counter span{min-width:13px;padding:1px 2px;font-size:15px;line-height:18px}
.track-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px auto}
.track-controls audio{width:min(520px,calc(95% - 48px));margin:0}
.media-icon-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.media-icon{width:40px;height:40px;object-fit:contain;display:block}
.video-actions{display:flex;justify-content:center;align-items:center;gap:10px;margin:10px 0 24px}
.video-actions .media-icon{width:46px;height:46px}
@media(max-width:700px){.track-controls{gap:5px}.media-icon{width:36px;height:36px}.video-actions .media-icon{width:42px;height:42px}}

/* V0.4.5 */
.side-counter{margin-top:42px}
.track-controls audio{width:min(390px,78vw);height:40px;margin:0}
.track-controls .media-icon{width:40px;height:40px}
.media-icon-link{border:0;background:transparent;padding:0;cursor:pointer}
.modal-video{display:none;height:600px;width:auto;max-height:85vh;max-width:92vw;background:#000;box-shadow:0 0 0 1px #aaa}
.modal .close.drink-close{right:18px;top:12px;width:52px;height:78px;background:transparent;border:0;padding:0;color:white}
.drink-close img{height:70px;width:auto;image-rendering:auto}.drink-close span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:bold 38px Arial;color:white;text-shadow:0 0 4px #000,0 0 4px #000}
.gallery-nav .drink-nav{background:transparent;border:0;padding:4px}.gallery-nav .drink-nav img{width:119px;height:auto;display:block}.gallery-nav .prev{left:10px}.gallery-nav .next{right:10px}
@media(max-width:700px){.modal-video{height:auto;width:92vw;max-height:80vh}.gallery-nav .drink-nav img{width:82px}.modal .close.drink-close{width:40px;height:64px}.drink-close img{height:56px}.drink-close span{font-size:30px}}


/* V0.4.6 */
.side-counter{margin-top:56px}
.gallery-nav .drink-nav{border:0!important;outline:0;background:transparent;box-shadow:none}
.gallery-nav .drink-nav img,.drink-close img{background:transparent;border:0;box-shadow:none}
.modal .close.drink-close{border:0!important;outline:0;box-shadow:none;background:transparent}
.drink-close span{inset:20px 0 0 0;align-items:flex-start;font-size:27px;line-height:1;text-shadow:0 0 3px #000,0 0 3px #000}
@media(max-width:700px){.drink-close span{inset:17px 0 0 0;font-size:23px}}
/* V0.4.7: X centrada sobre la etiqueta roja del Licor 43 */
.drink-close span{inset:38px 0 0 0!important;align-items:flex-start!important}
@media(max-width:700px){.drink-close span{inset:32px 0 0 0!important}}


/* V1.0.4: controles del visor bajo la foto/video */
.modal.open{flex-direction:column;gap:0}
.modal>img,.modal>.modal-video{flex:0 1 auto}
.modal>img{max-height:calc(100vh - 105px)}
.modal-video{max-height:calc(100vh - 105px)}
.modal-footer{display:grid;grid-template-columns:minmax(82px,130px) minmax(0,1fr) minmax(82px,130px);align-items:center;justify-items:center;gap:14px;width:min(760px,95vw);margin-top:10px;z-index:2}
.modal .caption{position:static;bottom:auto;color:white;font:14px Arial;text-align:center;min-width:0;width:100%;white-space:normal}
.modal-footer .drink-nav{position:static;top:auto;left:auto;right:auto;transform:none;background:transparent;border:0!important;outline:0;box-shadow:none;padding:2px 4px;cursor:pointer;pointer-events:auto}
.modal-footer .drink-nav img{width:119px;max-width:100%;height:auto;display:block;background:transparent;border:0;box-shadow:none}
@media(max-width:700px){
  .modal{padding:18px 10px 14px}
  .modal>img{max-width:96vw;max-height:calc(100vh - 90px)}
  .modal-video{max-width:96vw;max-height:calc(100vh - 90px)}
  .modal-footer{grid-template-columns:82px minmax(0,1fr) 82px;gap:7px;width:96vw;margin-top:8px}
  .modal-footer .drink-nav img{width:82px}
  .modal .caption{font-size:12px;line-height:1.2}
}