/* manolobenavides.com/fotos — mismo sistema de la web principal:
   papel / tinta / rojo marcador / ámbar de escenario, Fraunces + Inter. */
:root{
  --paper:#F7F5F1; --ink:#1C1A17; --marker-red:#E8432F; --stage-amber:#F2A93B; --muted:#8A857C;
  --linea:rgba(28,26,23,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif;}
body{overflow-x:hidden; -webkit-font-smoothing:antialiased;}
img{display:block; max-width:100%; -webkit-user-drag:none;}
a{color:inherit;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.muted{color:var(--muted);}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{outline:3px solid var(--stage-amber); outline-offset:3px; border-radius:2px;}

/* ---------- Barra ---------- */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 64px; background:var(--ink); color:var(--paper);
  border-bottom:1px solid rgba(247,245,241,0.10);
}
.barra-nombre{font-family:'Fraunces',serif; font-weight:600; font-size:20px; text-decoration:none;}
.barra-volver{font-size:13px; font-weight:600; letter-spacing:0.02em; text-decoration:none; color:rgba(247,245,241,0.72); border-bottom:2px solid rgba(242,169,59,0.5); padding-bottom:2px;}
.barra-volver:hover{color:var(--paper); border-color:var(--stage-amber);}

/* ---------- Cabecera ---------- */
.cabecera{background:var(--ink); color:var(--paper); position:relative; overflow:hidden; padding:84px 64px 96px;}
.cabecera-foco{
  position:absolute; top:-60%; right:-10%; width:70vw; height:70vw; pointer-events:none;
  background:radial-gradient(circle, rgba(242,169,59,0.42) 0%, rgba(232,67,47,0.16) 40%, rgba(232,67,47,0) 68%);
  filter:blur(8px);
}
.cabecera-in{position:relative; max-width:760px;}
.ceja{font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--stage-amber); font-weight:600; display:flex; align-items:center; gap:10px; margin-bottom:24px;}
.ceja::before{content:''; width:26px; height:2px; background:currentColor; display:inline-block;}
.ceja-roja{color:var(--marker-red); margin-bottom:14px; font-size:11px;}
.titular{font-family:'Fraunces',serif; font-weight:700; font-size:72px; line-height:0.98; letter-spacing:-0.015em;}
.titular .acento{font-style:italic; color:var(--marker-red);}
.titular-evento{font-size:60px;}
.bajada{margin-top:26px; max-width:520px; font-size:18px; line-height:1.6; color:rgba(247,245,241,0.72);}
.cuenta{margin-top:26px; font-size:14px; color:rgba(247,245,241,0.6);}
.cuenta strong{color:var(--stage-amber); font-weight:700;}
.migas{display:inline-block; margin-bottom:30px; font-size:13px; font-weight:600; text-decoration:none; color:rgba(247,245,241,0.7);}
.migas:hover{color:var(--paper);}

/* ---------- Contenido ---------- */
.contenido{
  padding:72px 64px 110px; position:relative;
  background:linear-gradient(180deg, var(--paper) 0%, #F1EEE7 50%, var(--paper) 100%);
  min-height:40vh;
}
.vacio{text-align:center; padding:60px 0;}
.vacio-t{font-family:'Fraunces',serif; font-style:italic; font-size:26px; margin-bottom:12px;}
.enlace{color:var(--marker-red); font-weight:600; text-decoration:none; border-bottom:2px solid rgba(232,67,47,0.34);}
.enlace:hover{border-color:var(--marker-red);}

.buscador{max-width:1312px; margin:0 auto 44px; display:flex; align-items:center; gap:20px;}
.buscador input{
  flex:1; max-width:520px; font:inherit; font-size:16px; padding:15px 4px; background:transparent;
  border:none; border-bottom:2px solid var(--ink); color:var(--ink); border-radius:0;
}
.buscador input::placeholder{color:var(--muted);}
.buscador input:focus{outline:none; border-color:var(--marker-red);}
.buscador-cuenta{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}

/* Tarjetas de evento: fotos "colgadas", como el mosaico de la home */
.eventos{list-style:none; max-width:1312px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:40px 30px;}
.evento a{display:block; text-decoration:none; transform:rotate(var(--rot,0deg)); transition:transform .3s ease;}
.evento a:hover{transform:rotate(0deg) translateY(-4px);}
.evento-foto{
  display:block; aspect-ratio:4/3; overflow:hidden; border-radius:2px; position:relative;
  background:linear-gradient(160deg, #26241f 0%, #171613 60%, #0e0d0b 100%);
  box-shadow:0 16px 30px rgba(28,26,23,0.22); border:1px solid rgba(28,26,23,0.1);
}
.evento-foto::after{
  content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:140%; height:140%;
  background:radial-gradient(circle, rgba(242,169,59,0.35) 0%, rgba(242,169,59,0) 55%);
}
.evento-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .6s ease;}
.evento a:hover .evento-foto img{transform:scale(1.04);}
.evento-txt{display:flex; flex-direction:column; gap:6px; padding:18px 2px 0;}
.evento-fecha{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--marker-red); font-weight:700;}
.evento-titulo{font-family:'Fraunces',serif; font-weight:600; font-size:23px; line-height:1.2;}
.evento-meta{font-size:14px; color:var(--muted);}
.sin-resultados{text-align:center; font-family:'Fraunces',serif; font-style:italic; font-size:20px; padding:40px 0;}

/* Grilla de fotos (mampostería con columnas) */
.grilla{column-count:4; column-gap:16px; max-width:1400px; margin:0 auto;}
.cuadro{break-inside:avoid; margin-bottom:16px; position:relative; border-radius:2px; overflow:hidden;
  background:linear-gradient(160deg, #26241f 0%, #171613 60%, #0e0d0b 100%);
  box-shadow:0 10px 22px rgba(28,26,23,0.16);}
.cuadro-btn{display:block; width:100%; height:100%; border:none; padding:0; background:none; cursor:zoom-in;}
.cuadro-btn img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease, opacity .4s ease;}
.cuadro:hover .cuadro-btn img{transform:scale(1.03);}
.cuadro-dl{
  position:absolute; right:10px; bottom:10px; width:40px; height:40px; border-radius:50%;
  background:rgba(247,245,241,0.94); color:var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(28,26,23,0.25); opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s, background .25s, color .25s;
}
.cuadro-dl svg{width:18px; height:18px;}
.cuadro:hover .cuadro-dl, .cuadro-dl:focus-visible{opacity:1; transform:none;}
.cuadro-dl:hover{background:var(--marker-red); color:var(--paper);}
@media (hover:none){ .cuadro-dl{opacity:1; transform:none;} }
.retiro{max-width:640px; margin:56px auto 0; text-align:center; font-size:14px; color:var(--muted); line-height:1.7;}

/* ---------- Sin acceso: la página se ve, pero apagada detrás del popup ---------- */
.sin-acceso .pagina{filter:blur(3px) saturate(.7); pointer-events:none; user-select:none;}

/* ---------- Pie ---------- */
.pie{background:var(--ink); color:#a8a49b; padding:30px 64px 36px; font-size:13px;}
.pie-fila{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.pie a{text-decoration:none;}
.pie a:hover{color:var(--paper);}
.privacidad{margin-top:20px; border-top:1px solid rgba(247,245,241,0.12); padding-top:16px;}
.privacidad summary{cursor:pointer; font-weight:600; color:rgba(247,245,241,0.75);}
.privacidad-txt{margin-top:12px; max-width:760px; line-height:1.7; display:grid; gap:10px;}
.privacidad-txt a{color:var(--stage-amber);}

/* ---------- Popup de registro ---------- */
.velo{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(28,26,23,0.62); overflow-y:auto;
  animation:velo-in .35s ease both;
}
@keyframes velo-in{from{opacity:0}}
.modal{
  position:relative; width:100%; max-width:470px; background:var(--paper); color:var(--ink);
  padding:44px 40px 34px; border-radius:3px; box-shadow:0 30px 70px rgba(0,0,0,0.45);
  display:flex; flex-direction:column; gap:16px; margin:auto;
  animation:modal-in .5s cubic-bezier(.2,.7,.2,1) .08s both;
}
@keyframes modal-in{from{opacity:0; transform:translateY(24px) rotate(-1deg)}}
.modal-marca{position:absolute; top:-8px; left:40px; width:56px; height:16px; background:var(--marker-red); transform:rotate(-3deg); box-shadow:0 4px 8px rgba(28,26,23,0.25);}
.modal-titulo{font-family:'Fraunces',serif; font-weight:600; font-size:30px; line-height:1.12; letter-spacing:-0.01em;}
.modal-bajada{font-size:15px; line-height:1.55; color:#55504a; margin-bottom:6px;}
.campo{display:flex; flex-direction:column; gap:7px;}
.campo span{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700;}
.campo em, .check em{font-style:normal; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0;}
.campo input{
  font:inherit; font-size:16px; padding:14px 14px; border:1.5px solid rgba(28,26,23,0.22); border-radius:2px;
  background:#fff; color:var(--ink);
}
.campo input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(242,169,59,0.35);}
.check{display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; cursor:pointer;}
.check input{flex:none; width:19px; height:19px; margin-top:1px; accent-color:var(--marker-red);}
.check a{color:var(--marker-red); font-weight:600;}
.modal-error{background:rgba(232,67,47,0.1); color:#b32a18; border-left:3px solid var(--marker-red); padding:10px 12px; font-size:14px; font-weight:500;}
.btn-rojo{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--marker-red); color:var(--paper); border:none; cursor:pointer;
  padding:17px 30px; border-radius:2px; font:inherit; font-size:15px; font-weight:600; letter-spacing:0.02em; text-decoration:none;
  transition:background .2s, transform .2s;
}
.btn-rojo:hover{background:#d23722;}
.btn-rojo:active{transform:translateY(1px);}
.btn-rojo[disabled]{opacity:.65; cursor:wait;}
.btn-rojo svg{width:17px; height:17px;}
.btn-chico{padding:11px 18px; font-size:14px;}
.modal-salir{text-align:center; font-size:13px; color:var(--muted); text-decoration:none;}
.modal-salir:hover{color:var(--ink);}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.modal.ok .modal-titulo::after{content:' ✓'; color:var(--marker-red);}

/* ---------- Visor ---------- */
.visor{position:fixed; inset:0; z-index:200; background:rgba(16,15,13,0.97); display:flex; flex-direction:column; color:var(--paper);}
.visor[hidden]{display:none;}
.visor-barra{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; gap:12px;}
.visor-cuenta{font-size:13px; letter-spacing:0.12em; color:rgba(247,245,241,0.6); font-weight:600;}
.visor-acciones{display:flex; gap:10px; align-items:center;}
.visor-x{background:none; border:1.5px solid rgba(247,245,241,0.3); color:var(--paper); width:44px; height:44px; border-radius:50%; font-size:16px; cursor:pointer;}
.visor-x:hover{border-color:var(--paper);}
.visor-escena{flex:1; position:relative; display:flex; align-items:center; justify-content:center; padding:0 72px 24px; min-height:0; touch-action:pan-y;}
.visor-escena img{max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,0.5); transition:opacity .2s ease;}
.visor-escena img.cargando{opacity:.35;}
.visor-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(247,245,241,0.08); border:1.5px solid rgba(247,245,241,0.2); color:var(--paper); font-size:28px; line-height:1; cursor:pointer;}
.visor-nav:hover{background:rgba(247,245,241,0.18);}
.visor-prev{left:12px;} .visor-next{right:12px;}

/* ---------- Móvil ---------- */
@media (max-width:1100px){ .grilla{column-count:3;} }
@media (max-width:760px){
  .barra{padding:16px 20px;}
  .barra-nombre{font-size:17px;}
  .cabecera{padding:52px 24px 60px;}
  .titular{font-size:44px;}
  .titular-evento{font-size:38px;}
  .bajada{font-size:16px;}
  .contenido{padding:44px 16px 70px;}
  .buscador{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:32px;}
  .buscador input{max-width:none;}
  .eventos{grid-template-columns:1fr 1fr; gap:28px 14px;}
  .evento-titulo{font-size:17px;}
  .evento-meta{font-size:12px;}
  .grilla{column-count:2; column-gap:10px;}
  .cuadro{margin-bottom:10px;}
  .cuadro-dl{width:36px; height:36px; right:8px; bottom:8px;}
  .pie{padding:24px 20px 30px;}
  .modal{padding:38px 22px 26px;}
  .modal-titulo{font-size:25px;}
  .visor-escena{padding:0 0 16px;}
  .visor-nav{display:none;}
}
@media (max-width:420px){ .eventos{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }