@font-face{font-family:"Hollaboi";src:url("../fonts/Hollaboi.woff") format("woff");font-display:swap;}
:root{
  --bg:#F3F3F3; --card:#FFFFFF; --ink:#232323; --title:#44444A; --soft:#818181; --rule:#E2E2E2; --black:#232323;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#141414; --card:#1E1E1E; --ink:#EDEDED; --title:#F2F2F4; --soft:#9A9A9A; --rule:#2E2E2E; --black:#0A0A0A;}
}
:root[data-theme="dark"]{--bg:#141414; --card:#1E1E1E; --ink:#EDEDED; --title:#F2F2F4; --soft:#9A9A9A; --rule:#2E2E2E; --black:#0A0A0A;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 Roboto,sans-serif;}
a{color:inherit;}
.wrap{max-width:1040px;margin:0 auto;padding:0 30px;}

/* ---- hero: same header as aedeanllano.com ---- */
.hero{position:relative;min-height:320px;padding:40px 20px 120px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  color:#fff;overflow:hidden;
  background:#555 url("https://s3.amazonaws.com/almacenamiento.aedeanllano.com/images/fondo-aedean-llano.webp") center/cover;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.35),rgba(20,20,20,.55));}
.hero > *{position:relative;}
.hero h1{font-family:Hollaboi,sans-serif;font-weight:700;font-size:clamp(56px,9vw,96px);line-height:1;margin:0;}
.hero .kicker{font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;margin:18px 0 0;}

/* ---- cards, like the blog grid ---- */
.card{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.05);padding:36px 40px;}
h2{font-size:28px;font-weight:700;color:var(--title);line-height:1.2;margin:0 0 14px;text-align:center;}
.label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 10px;}

.intro{margin-top:-50px;position:relative;z-index:2;max-width:760px;margin-left:auto;margin-right:auto;padding:0 34px 28px;text-align:center;}
.avatar{width:128px;height:128px;border-radius:50%;margin:-64px auto 18px;border:5px solid var(--card);overflow:hidden;
  background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:Hollaboi,sans-serif;font-size:44px;box-shadow:0 4px 18px rgba(0,0,0,.18);}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.intro p{margin:0;}
.intro .label + p{margin-bottom:18px;}
.clients{color:var(--title);font-weight:700;}

/* ---- filters: black square buttons ---- */
.section-title{margin:64px 0 22px;}
.filters{display:flex;justify-content:center;gap:8px;margin-bottom:24px;flex-wrap:wrap;}
.filters button{font:700 13px Roboto,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--black);
  background:transparent;color:var(--ink);cursor:pointer;}
.filters button.on{background:var(--black);color:#fff;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.item{background:var(--card);padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:zoom-in;border:none;text-align:left;font:inherit;color:inherit;display:block;width:100%;}
.item.hide{display:none;}
.media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--rule);}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.item:hover .media img,.item:hover .media video{transform:scale(1.04);}
.badge{position:absolute;top:10px;left:10px;background:var(--black);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;padding:5px 9px;}
.meta{display:flex;justify-content:space-between;align-items:center;padding:12px 2px 2px;color:var(--soft);font-size:13px;}
.meta b{color:var(--ink);font-weight:700;font-size:14px;}



footer{text-align:center;color:var(--soft);font-size:13px;padding:40px 0 50px;}
footer a{color:var(--ink);}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center;z-index:10;padding:30px;}
.lb.open{display:flex;}
.lb img,.lb video{max-width:100%;max-height:88vh;display:block;}
.lb button{position:absolute;background:var(--black);color:#fff;border:none;width:49px;height:49px;font-size:22px;cursor:pointer;}
.lb .x{top:20px;right:20px;} .lb .prev{left:20px;top:50%;} .lb .next{right:20px;top:50%;}


/* ---- lock screen ---- */
body.locked{overflow:hidden;}
body.locked .hero,body.locked .wrap{display:none;}
.gate{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px;
  background:#555 url("https://s3.amazonaws.com/almacenamiento.aedeanllano.com/images/fondo-aedean-llano.webp") center/cover;}
.gate::before{content:"";position:absolute;inset:0;background:rgba(20,20,20,.55);}
.gate > *{position:relative;}
body:not(.locked) .gate{display:none;}
.gate h1{font-family:Hollaboi,sans-serif;font-weight:700;font-size:clamp(56px,11vw,110px);line-height:1;margin:0;}
.gate .kicker{font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;margin:14px 0 34px;}
.gate form{display:flex;width:100%;max-width:380px;background:var(--card);box-shadow:0 10px 40px rgba(0,0,0,.3);}
.gate input{flex:1;min-width:0;border:none;padding:16px 18px;font:400 15px Roboto,sans-serif;background:transparent;color:var(--ink);outline:none;}
.gate button{border:none;background:var(--black);color:#fff;font:700 13px Roboto,sans-serif;letter-spacing:.12em;padding:0 22px;cursor:pointer;}
.gate .err{min-height:22px;margin:14px 0 0;font-size:13px;color:#ffd2d2;}
.gate form.shake{animation:shake .35s;}
@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
.gate .note{position:absolute;bottom:22px;font-size:12px;opacity:.75;}
.gate .note a{color:#fff;}

@media (max-width:820px){
  .wrap{padding:0 16px;}
  .intro{margin-top:-40px;}
  .avatar{width:112px;height:112px;margin-top:-56px;font-size:38px;}
    .card{padding:28px 22px;}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .item{padding:8px;}
  .meta{font-size:12px;}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* ---- empty state ---- */
.empty{grid-column:1/-1;text-align:center;color:var(--soft);padding:40px 0;}

/* "Sobre el trabajo" as the card's heading */
.intro .intro-title{font-size:22px;letter-spacing:.12em;color:var(--title);margin-bottom:12px;}
@media (max-width:820px){.intro .intro-title{font-size:19px;}}

/* artista / proyecto */
.meta{align-items:flex-start;}
.meta div{min-width:0;}
.meta b{display:block;}
.meta small{display:block;font-size:12.5px;color:var(--soft);line-height:1.35;margin-top:2px;}
.meta small:empty{display:none;}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;}
.lb .lb-fig img,.lb .lb-fig video{max-height:80vh;}
#lb-caption{color:#fff;text-align:center;margin-top:14px;font-size:14px;}
#lb-caption b{font-size:16px;}
#lb-caption span{color:#bbb;}
#lb-caption b:not(:empty) + span:not(:empty)::before{content:" — ";}

/* Fotografía: category covers (De estudio / En vivo) */
.grid.cats{grid-template-columns:repeat(2,1fr);}
.cat{position:relative;display:block;width:100%;padding:14px;border:none;background:var(--card);cursor:pointer;text-align:left;font:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.05);}
.cat-cover{aspect-ratio:4/5;overflow:hidden;background:var(--rule);}
.cat-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .6s ease;filter:brightness(.8);}
.cat:hover .cat-cover img{transform:scale(1.04);filter:brightness(.65);}
.cat-label{position:absolute;left:14px;right:14px;bottom:14px;padding:26px 24px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);display:flex;justify-content:space-between;align-items:flex-end;gap:10px;}
.cat-label b{font-family:Hollaboi,sans-serif;font-weight:700;font-size:clamp(34px,5vw,54px);line-height:1;}
.cat-label span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;}

/* back link inside a category */
.crumb{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-bottom:-8px;}
.crumb .back{font:700 12px Roboto,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--black);
  background:transparent;color:var(--ink);cursor:pointer;}
.crumb .back:hover{background:var(--black);color:#fff;}
.crumb span{font-family:Hollaboi,sans-serif;font-size:30px;color:var(--title);}
@media (max-width:820px){
  .grid.cats{gap:12px;}
  .cat{padding:8px;}
  .cat-label{left:8px;right:8px;bottom:8px;padding:18px 12px;flex-direction:column;align-items:flex-start;gap:4px;}
  .cat-label span{font-size:10.5px;}
}

/* category links under a photo category ("VER +" style from aedeanllano.com) */
.more-cats{grid-column:1/-1;display:flex;justify-content:center;gap:34px;margin-top:14px;}
.more-cats a{color:#999;font-size:20px;font-weight:900;text-decoration:none;transition:color .15s;}
.more-cats a:hover{color:var(--title);}
.more-cats a[aria-current]{color:var(--title);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;}

/* Photos: justified rows, every photo whole and in its own proportion (--r = width/height) */
.grid.filas{display:flex;flex-wrap:wrap;gap:20px;--alto:300px;}
.grid.filas::after{content:"";flex:999 1 0;}
.grid.filas > *{flex-basis:100%;}
.grid.filas .item{--r:.8;flex:var(--r) 1 calc(var(--r) * var(--alto));min-width:0;}
.grid.filas .media{aspect-ratio:var(--r);}
@media (max-width:820px){.grid.filas{gap:10px;--alto:130px;}}

/* category links at the top, next to "‹ Fotografía" */
.crumb{justify-content:space-between;flex-wrap:wrap;}
.crumb .more-cats{margin:0;gap:26px;}
@media (max-width:820px){.crumb .more-cats a{font-size:16px;}.crumb .more-cats{gap:18px;}}

/* YouTube: play icon on the thumbnail, and the player in the lightbox */
.play-yt{position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:12px;background:rgba(20,20,20,.8);transition:background .2s;}
.play-yt::after{content:"";position:absolute;left:26px;top:13px;border-left:16px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;}
.item:hover .play-yt{background:#000;}
.grid.yt .item:hover .play-yt{background:#f00;}
.lb iframe.yt{width:min(92vw, calc(80vh * 16 / 9));aspect-ratio:16/9;border:0;display:block;background:#000;}
.grid.filas.yt{--alto:220px;}

/* Para redes: muted preview on hover */
.media .hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.item.reproduciendo .play-yt{opacity:0;}
.play-yt{transition:background .2s,opacity .2s;z-index:2;}

/* While checking whether this device already has access, hide the form */
body.verificando .gate form,body.verificando .gate .note,body.verificando .gate .err{visibility:hidden;}
.gate button:disabled{opacity:.6;cursor:wait;}