/* opheliapastrana.com/fotos — solo lo que existe en esta sección.
   Tokens, barra, pie y botones viven en /css/site.css */

:root{ --row:270px; }   /* alto de fila de la retícula */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
.sec-lede{ margin:1.1rem 0 0; }
.insignia .red, .hero-dark .red{ color:var(--signal-on-dark); }

/* ── las de siempre ──────────────────────────────── */
.insignia{ background:var(--stage); color:#fff; padding:0 0 clamp(3rem,7vw,5rem); border-bottom:1px solid var(--rule-dk); }
.insignia .eyebrow{ color:var(--signal-on-dark); }
.duo{ display:flex; gap:4px; margin-top:1.8rem; }
.duo .card{ display:flex; flex-direction:column; min-width:0; }
.duo .card:nth-child(1){ flex:1.6; }
.duo .card:nth-child(2){ flex:.667; }
.duo .frame{ position:relative; display:block; background:var(--stage-2); overflow:hidden; }
.duo .frame::before{ content:""; display:block; padding-bottom:calc(100% / var(--r)); }
.duo .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.duo .frame:hover img{ transform:scale(1.02); }
.duo .frame .open{ position:absolute; right:.8rem; bottom:.8rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:rgba(12,12,12,.72); padding:.4rem .6rem; opacity:0; transition:opacity .2s; }
.duo .frame:hover .open, .duo .frame:focus-visible .open{ opacity:1; }
.duo .under{ display:flex; flex-direction:column; align-items:flex-start; gap:.8rem;
  padding:.9rem 0 0; border-top:1px solid var(--rule-dk); margin-top:.9rem; }
.duo .under .dl .btn{ padding:.55rem .8rem; }
.credit-line{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-dk); }
.credit-line b{ color:#fff; font-weight:500; }
.dl{ display:flex; gap:.4rem; flex-wrap:wrap; }
.dl .btn, .lb-dl .btn{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  padding:.6rem .95rem; background:var(--signal); color:#fff; border:2px solid var(--signal); text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease; white-space:nowrap; }
.dl .btn:hover, .lb-dl .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.dl .btn-ghost, .lb-dl .btn-ghost{ background:transparent; color:#fff; border-color:var(--rule-dk); }
.dl .btn-ghost:hover, .lb-dl .btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.dl .btn small, .lb-dl .btn small{ font-family:var(--mono); font-weight:400; font-size:.6rem; letter-spacing:.08em; opacity:.8; }
.dl .btn svg, .lb-dl .btn svg{ width:.85em; height:.85em; }
@media (max-width:720px){
  .duo{ flex-direction:column; gap:2.2rem; }
  .duo .card:nth-child(2) .frame{ max-width:70%; }
}

/* ── el archivo: controles ───────────────────────── */
#archivo{ padding:var(--sec-y) 0 2.4rem; transition:background .35s ease; }
#archivo.filtrado{ background:var(--haze-2); box-shadow:inset 0 4px 0 var(--signal); }
.buscar{ margin-top:2rem; }
.q{ width:100%; border:none; border-bottom:2px solid var(--ink); background:transparent; padding:.6rem 0; font-family:var(--display);
  font-size:clamp(1.2rem,1rem + 1.2vw,1.7rem); font-weight:500; border-radius:0; letter-spacing:-.01em; }
.q:focus{ outline:none; border-bottom-color:var(--signal); }
.q::placeholder{ color:var(--mute); font-weight:400; }
.sorter{ margin-top:2rem; display:grid; gap:1.5rem 2.2rem; grid-template-columns:auto auto auto; justify-content:start; }
.sorter[hidden]{ display:none; }
@media (max-width:1000px){ .sorter{ grid-template-columns:auto auto; } }
@media (max-width:520px){ .sorter{ grid-template-columns:1fr; } }
.sorter-more{ margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--rule); grid-template-columns:auto minmax(0,1fr); }
@media (max-width:700px){ .sorter-more{ grid-template-columns:1fr; } }
.more{ margin-top:1.8rem; background:none; border:none; padding:0 0 .2rem; cursor:pointer; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--signal); }
.more small{ font-size:.6rem; color:var(--mute); letter-spacing:.1em; margin-left:.4rem; }
.more::after{ content:"▾"; margin-left:.45rem; color:var(--signal); display:inline-block; transition:transform .2s; }
.more[aria-expanded="true"]::after{ transform:rotate(180deg); }
.more:hover{ color:var(--signal); }
.more b{ color:var(--signal); font-weight:500; }
.facet{ min-width:0; }
.facet-l{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 .6rem; }
.facet-l b{ color:var(--signal); font-weight:500; }
.row{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }

/* forma: marquitos */
.shape{ display:inline-grid; place-items:center; width:2.3rem; height:2.3rem; border:1px solid var(--ink); background:var(--paper); cursor:pointer; padding:0; }
.shape i{ display:block; border:2px solid currentColor; }
.shape[data-v="vertical"] i{ width:.8rem; height:1.2rem; }
.shape[data-v="horizontal"] i{ width:1.35rem; height:.85rem; }
.shape[data-v="cuadrada"] i{ width:1rem; height:1rem; }
.shape:hover{ border-color:var(--signal); color:var(--signal); }
.shape[aria-pressed="true"]{ background:var(--signal); border-color:var(--signal); color:#fff; }

/* color: swatches reales */
.sw{ width:2.3rem; height:2.3rem; border:1px solid var(--ink); padding:0; cursor:pointer; position:relative; background:var(--c); }
.sw[data-v="bn"]{ background:linear-gradient(135deg,#111 50%,#f2f2f2 50%); }
.sw[data-v="arcoiris"], .spec .dots i.rbow{ background:linear-gradient(180deg,#E40303 0 16.7%,#FF8C00 16.7% 33.4%,#FFED00 33.4% 50%,#008026 50% 66.7%,#24408E 66.7% 83.4%,#732982 83.4% 100%); }
.sw[data-v="neutro"]{ background:var(--c); }
.sw::after{ content:""; position:absolute; inset:-4px; border:2px solid transparent; pointer-events:none; }
.sw:hover::after{ border-color:var(--signal); }
.sw[aria-pressed="true"]::after{ border-color:var(--ink); }
.sw[aria-pressed="true"]::before{ content:""; position:absolute; left:50%; top:50%; width:.7rem; height:.4rem;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:translate(-50%,-65%) rotate(-45deg);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.8)); }


.cuenta{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:baseline; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); margin-top:2rem; }
.cuenta b{ color:var(--signal); font-weight:500; }
.cuenta button{ background:none; border:none; padding:0; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--ink); border-bottom:2px solid var(--signal); display:none; }
#archivo.filtrado .cuenta button{ display:inline; }
.cuenta .share{ margin-left:auto; color:var(--mute); border:none; display:none; }
#archivo.filtrado .cuenta .share{ display:inline; }
.cuenta .share:hover{ color:var(--signal); }

/* ── retícula ────────────────────────────────────── */
.stage{ background:var(--stage); padding:4px 0 4px; }
.grid{ display:flex; flex-wrap:wrap; gap:4px; padding:0 4px; }
.grid::after{ content:""; flex-grow:1000000; }
.ph{ position:relative; display:block; overflow:hidden; background:var(--stage-2); text-decoration:none; color:#fff;
  flex-grow:calc(var(--r) * 100); flex-basis:calc(var(--r) * var(--row)); }
.ph::before{ content:""; display:block; padding-bottom:calc(100% / var(--r)); }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease, opacity .4s ease; opacity:0; }
.ph img.in{ opacity:1; }
.ph:hover img{ transform:scale(1.03); }
.ph .ov{ position:absolute; inset:auto 0 0 0; padding:1.6rem .8rem .65rem; display:flex; justify-content:space-between; align-items:flex-end; gap:.6rem;
  background:linear-gradient(transparent, rgba(12,12,12,.82)); opacity:0; transition:opacity .2s ease; }
.ph:hover .ov, .ph:focus-visible .ov{ opacity:1; }
@media (hover:none){ .ph .ov{ opacity:1; padding:1rem .5rem .45rem; justify-content:flex-end; } .ph .ov b{ display:none; } .ph .ov i{ font-size:.5rem; } }
.ph .ov b{ font-family:var(--mono); font-weight:500; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.ph .ov i{ font-style:normal; font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-dk); white-space:nowrap; }
.ph .ov i.print{ color:#fff; border:1px solid rgba(255,255,255,.55); padding:.15rem .4rem; }
.ph.hide{ display:none; }
.ph .dot{ position:absolute; top:.6rem; left:.6rem; width:.55rem; height:.55rem; background:var(--signal); display:none; }
.ph.ph-hero .dot{ display:block; }
.vacio{ color:var(--mute-dk); text-align:center; padding:5rem 1.25rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; width:100%; }
.vacio button{ background:none; border:none; color:#fff; border-bottom:2px solid var(--signal); cursor:pointer; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; margin-left:.6rem; }
@media (max-width:900px){ :root{ --row:200px; } }
@media (max-width:560px){ :root{ --row:150px; } }

/* ── uso ─────────────────────────────────────────── */
.uso{ padding:var(--sec-y) 0; background:var(--paper); }
.uso .cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:2.4rem; }
.uso article{ background:var(--paper); padding:1.5rem 1.4rem; }
.uso h3{ font-size:.95rem; margin-bottom:.5rem; }
.uso p{ margin:0; color:var(--mute); font-size:.92rem; line-height:1.5; }
.uso p b{ color:var(--ink); font-weight:600; }
.uso .mail{ margin:2.4rem 0 0; font-family:var(--mono); font-size:clamp(1rem,2.2vw,1.3rem); }
.uso .mail a{ text-decoration:none; border-bottom:3px solid var(--signal); padding-bottom:.15rem; }
.uso .mail a:hover{ color:var(--signal); }
.uso .canal{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-top:.6rem; }

/* ── lightbox ────────────────────────────────────── */
dialog.lb{ outline:none; border:none; padding:0; margin:0; width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; background:var(--stage); color:#fff; }
dialog.lb::backdrop{ background:rgba(0,0,0,.9); }
.lb-in{ display:grid; grid-template-columns:minmax(0,1fr) 340px; grid-template-rows:minmax(0,1fr); height:100dvh; }
.lb-img{ position:relative; display:flex; align-items:center; justify-content:center; --pad:clamp(.5rem,3vw,2rem); padding:var(--pad); min-height:0; min-width:0; height:100dvh; }
.lb-img img{ display:block; max-width:100%; max-height:calc(100dvh - 2 * var(--pad)); width:auto; height:auto; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:3rem; height:3rem; display:grid; place-items:center; background:rgba(12,12,12,.6);
  border:1px solid var(--rule-dk); color:#fff; cursor:pointer; }
.lb-nav:hover{ background:var(--signal); border-color:var(--signal); }
.lb-nav svg{ width:1rem; height:1rem; }
.lb-prev{ left:.8rem; } .lb-next{ right:.8rem; }
.lb-close{ position:absolute; top:.8rem; right:.8rem; width:2.6rem; height:2.6rem; display:grid; place-items:center; background:rgba(12,12,12,.6);
  border:1px solid var(--rule-dk); color:#fff; cursor:pointer; z-index:2; }
.lb-close:hover{ background:var(--signal); border-color:var(--signal); }
.lb-panel{ border-left:1px solid var(--rule-dk); padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,2.5vw,1.8rem); overflow:auto; display:flex; flex-direction:column; gap:1.4rem; }
.lb-panel .eyebrow{ color:var(--signal-on-dark); margin:0; }
.lb-credit{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.lb-credit b{ font-weight:800; font-size:clamp(1.15rem,1.6vw,1.4rem); text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; }
.copy{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; background:transparent; color:#fff;
  border:1px solid var(--rule-dk); padding:.5rem .7rem; cursor:pointer; white-space:nowrap; }
.copy:hover{ border-color:#fff; }
.copy.ok{ background:#fff; color:var(--ink); border-color:#fff; }
.lb-alt{ margin:0; color:var(--mute-dk); font-size:.94rem; line-height:1.5; }
.spec{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dk); }
.spec li{ display:grid; grid-template-columns:92px 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--rule-dk); font-size:.9rem; align-items:center; }
.spec .k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-dk); }
.spec .dots{ display:flex; gap:.35rem; align-items:center; }
.spec .dots i{ width:1rem; height:1rem; display:inline-block; border:1px solid rgba(255,255,255,.25); }
.spec .dots i.bn{ background:linear-gradient(135deg,#111 50%,#f2f2f2 50%); }
.spec .dots span{ font-size:.85rem; color:var(--mute-dk); }
.spec .ok{ color:#fff; } .spec .no{ color:var(--mute-dk); }
.lb-dl{ display:flex; flex-direction:column; gap:.5rem; }
.lb-dl .btn{ justify-content:space-between; padding:.85rem 1rem; }
.lb-rel{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-dk); }
.lb-rel a{ color:#fff; text-decoration:none; border-bottom:2px solid var(--signal); cursor:pointer; }
.lb-rel a:hover{ color:var(--signal-on-dark); }
.lb-foot{ margin-top:auto; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-dk); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.lb-foot a{ color:var(--mute-dk); text-decoration:none; } .lb-foot a:hover{ color:#fff; }
.lb-foot button{ background:none; border:none; padding:0; color:var(--mute-dk); cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; }
.lb-foot button:hover, .lb-foot button.ok{ color:#fff; }
@media (max-width:820px){
  .lb-in{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .lb-img{ --pad:.5rem; height:auto; }
  .lb-img img{ max-height:calc(52dvh - 2 * var(--pad)); }
  .lb-panel{ border-left:none; border-top:1px solid var(--rule-dk); max-height:48dvh; gap:1rem; }
  .lb-nav{ top:auto; bottom:.6rem; transform:none; }
}

/* en fotos el chip activo es rojo (en conferencias es negro salvo filtrado) */
#archivo .chip{ line-height:1; }
#archivo .chip[aria-pressed="true"]{ background-color:var(--signal); border-color:var(--signal); color:#fff; }
.cuenta{ margin-top:2rem; }