/* ORBLIZT · EXPLORE — biblioteca de referencias.
   Reutiliza tokens de styles.css y .page-wrap de service.css. */

.explore-page{ --ease:cubic-bezier(.22,1,.36,1);--media:#0f141b }
.explore-page .page-wrap{ max-width:1760px }
.visually-hidden{ clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden }

/* ---------- Navbar: fondo propio siempre; se esconde al bajar (explore.js) ---------- */
.explore-page .navbar,.explore-page .navbar.is-scrolled{ -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);background:#0b0f15eb;transition:transform .45s var(--ease),background .3s }
.explore-page .navbar.nav-hidden{ transform:translateY(-101%) }
.explore-page .nav-links a[aria-current="page"]{ color:var(--bone) }

/* ---------- Hero ---------- */
.explore-hero{ grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;column-gap:clamp(32px,4vw,72px);padding-top:clamp(140px,19svh,190px);padding-bottom:30px;display:grid }
.explore-hero-bottom{ grid-column:1/-1 }
.explore-hero-preview{ aspect-ratio:1.18;position:relative }
.preview-item{ aspect-ratio:16/10;border-radius:3px;width:76%;margin:0;animation:ref-in .7s var(--ease) var(--delay,0ms) both;position:absolute;overflow:hidden;box-shadow:0 28px 60px -24px #000000d9,0 0 0 1px #e5e7ea1f }
.preview-item picture{ display:contents }
.preview-item img{ object-fit:cover;object-position:top;width:100%;height:100% }
.preview-item:nth-child(1){ top:0;right:0 }
.preview-item:nth-child(2){ top:31%;left:0 }
.preview-item:nth-child(3){ bottom:0;right:7% }
.explore-hero h1{ letter-spacing:-.055em;max-width:15ch;font-size:clamp(42px,5.4vw,86px);font-weight:500;line-height:1 }
.explore-lede{ max-width:480px;color:var(--silver);margin-top:24px;font-size:15px;line-height:1.8 }
.explore-start{ margin-top:18px }
.explore-hero-bottom{ border-top:1px solid var(--line);color:var(--silver);flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin-top:clamp(34px,5svh,56px);padding-top:18px;font-size:10px;display:flex }
.explore-hero-bottom [data-explore-count]{ color:var(--bone);font-variant-numeric:tabular-nums }

/* ---------- Filtros y búsqueda ---------- */
.explore-library{ scroll-margin-top:24px;padding-top:28px }
.explore-toolbar{ border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) minmax(220px,300px);align-items:start;gap:0 40px;padding-bottom:10px;display:grid }
.explore-filter-rows{ flex-direction:column;gap:2px;min-width:0;display:flex }
.explore-filter-row{ align-items:flex-start;gap:18px;min-width:0;display:flex }
.explore-filter-label{ color:var(--silver);letter-spacing:.14em;text-transform:uppercase;opacity:.6;flex:0 0 74px;align-items:center;min-height:40px;font-size:9.5px;display:flex }
.explore-filters{ flex-wrap:wrap;gap:0 22px;min-width:0;display:flex }
.explore-filter{ color:var(--silver);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;background:0 0;align-items:center;gap:8px;min-height:40px;padding:0;font-size:10.5px;transition:color .3s var(--ease);display:inline-flex }
.explore-filter:before{ content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;transition:opacity .3s var(--ease),transform .3s var(--ease);opacity:0;transform:scale(.4) }
.explore-filter:hover,.explore-filter.is-active{ color:var(--bone) }
.explore-filter.is-active:before{ opacity:1;transform:none;box-shadow:0 0 8px #d6bc9566 }
.explore-filter:focus-visible,.explore-outline:focus-visible,.ref-save:focus-visible,.saved-clear:focus-visible,.dialog-close:focus-visible,.ref-visit:focus-visible,.ref-source:focus-visible{ outline:2px solid var(--accent);outline-offset:4px }

.explore-search{ color:var(--silver);border-bottom:1px solid var(--line);align-items:center;gap:12px;display:flex }
.explore-search svg{ flex-shrink:0 }
.explore-search input{ min-width:0;min-height:44px;color:var(--bone);background:0 0;border:0;outline:0;flex:1;font-size:13px }
.explore-search input::placeholder{ color:var(--silver);opacity:.75 }
.explore-search input::-webkit-search-cancel-button{ filter:invert(.7) }
.explore-search:focus-within{ color:var(--bone) }

.explore-meta{ color:var(--silver);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 30px;padding-top:14px;display:flex }
.explore-meta .mono{ min-height:1.7em;font-size:10px }
.explore-disclaimer{ max-width:460px;opacity:.85;font-size:11px;line-height:1.6 }
.explore-noscript{ color:var(--silver);padding:60px 0;font-size:14px }
.explore-noscript a{ color:var(--bone);text-decoration:underline }

/* ---------- Galería: la captura manda ---------- */
.explore-grid{ grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 28px;margin-top:40px;transition:opacity .2s var(--ease);display:grid }
.explore-grid.is-leaving{ opacity:0 }
.ref-card{ min-width:0;animation:ref-in .6s var(--ease) var(--delay,0ms) both }
@keyframes ref-in{ from{ opacity:0;transform:translateY(18px) } }
@keyframes saved-in{ from{ opacity:0 } }

.ref-media{ aspect-ratio:16/10;background:var(--media);border-radius:3px;display:block;position:relative;overflow:hidden;box-shadow:0 0 0 1px #e5e7ea14 }
.ref-media picture{ display:contents }
.ref-image{ object-fit:cover;object-position:top center;width:100%;height:100%;transition:transform .5s var(--ease);position:absolute;inset:0 }
.ref-media:after{ content:"";opacity:0;background:linear-gradient(#0a0f1600 62%,#0a0f1659);transition:opacity .45s var(--ease);position:absolute;inset:0 }
.ref-view{ z-index:1;color:var(--bone);letter-spacing:.16em;text-transform:uppercase;opacity:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0f16b3;border-radius:999px;padding:8px 13px;font-size:9.5px;transition:opacity .4s var(--ease),transform .4s var(--ease);position:absolute;bottom:14px;left:14px;transform:translateY(6px) }
.ref-media:hover .ref-image,.ref-media:focus-visible .ref-image{ transform:scale(1.03) }
.ref-media:hover:after,.ref-media:focus-visible:after,.ref-media:hover .ref-view,.ref-media:focus-visible .ref-view{ opacity:1;transform:none }
.ref-media:focus-visible{ outline:2px solid var(--accent);outline-offset:4px }

.ref-meta{ padding-top:16px }
.ref-head{ justify-content:space-between;align-items:flex-start;gap:14px;display:flex }
.ref-title{ min-width:0 }
.ref-name{ letter-spacing:-.025em;overflow-wrap:anywhere;font-size:17px;font-weight:500;line-height:1.3 }
.ref-industry{ color:var(--silver);margin-top:2px;font-size:12px }
.ref-save{ color:var(--silver);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;background:0 0;flex-shrink:0;min-height:40px;margin-top:-10px;padding:0 0 0 8px;font-size:9.5px;transition:color .3s var(--ease) }
.ref-save:hover{ color:var(--bone) }
.ref-save[aria-pressed="true"]{ color:var(--accent) }
.ref-tags{ color:var(--silver);opacity:.75;margin-top:10px;font-size:9px }
.ref-foot{ flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 18px;margin-top:4px;display:flex }
.ref-visit{ color:var(--bone);align-items:center;min-height:40px;font-size:12px;transition:color .3s var(--ease);display:inline-flex }
.ref-visit:hover{ color:var(--accent) }
.ref-credit{ color:var(--silver);opacity:.7;flex-wrap:wrap;gap:0 12px;font-size:10.5px;display:flex }
.ref-source{ transition:color .3s var(--ease) }
a.ref-source:hover{ color:var(--bone) }

.explore-empty{ text-align:center;padding:110px 0 40px }
.explore-empty-title{ letter-spacing:-.04em;font-family:var(--display);font-size:clamp(28px,3vw,40px) }
.explore-empty-text{ color:var(--silver);margin:10px 0 30px;font-size:13px }
.explore-outline{ border:1px solid var(--line);color:var(--bone);letter-spacing:.16em;text-transform:uppercase;background:0 0;border-radius:999px;min-height:48px;padding:0 30px;font-size:10px;transition:border-color .3s var(--ease),background .3s var(--ease) }
.explore-outline:hover{ border-color:var(--silver);background:#f5f4f00a }
.explore-more-wrap{ justify-content:center;margin-top:72px;display:flex }

/* ---------- CTA ---------- */
.explore-cta{ text-align:center;flex-direction:column;align-items:center;padding-top:clamp(130px,16vw,210px);padding-bottom:clamp(110px,13vw,170px);display:flex }
.explore-cta .eyebrow{ margin-bottom:24px }
.explore-cta h2{ letter-spacing:-.05em;max-width:18ch;font-size:clamp(36px,5.2vw,78px);line-height:1.04 }
.explore-cta-text{ max-width:520px;color:var(--silver);margin-top:28px;font-size:15px;line-height:1.8 }
.explore-cta-actions{ flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 36px;margin-top:40px;display:flex }
.explore-cta .button{ letter-spacing:.09em;text-transform:uppercase;gap:28px;font-size:11px }
.explore-cta .text-link{ letter-spacing:.09em;text-transform:uppercase;gap:14px;font-size:11px }

/* ---------- Barra de seleccionadas ---------- */
.saved-bar{ z-index:40;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0d1218eb;border:1px solid var(--line);border-radius:999px;align-items:center;gap:26px;padding:8px 8px 8px 26px;animation:saved-in .45s var(--ease);display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%) }
.saved-bar[hidden]{ display:none }
.saved-bar>.mono{ color:var(--bone);white-space:nowrap;font-size:10px }
.saved-bar-actions{ align-items:center;gap:16px;display:flex }
.saved-clear{ color:var(--silver);letter-spacing:.14em;text-transform:uppercase;background:0 0;min-height:44px;padding:0 4px;font-size:10px }
.saved-clear:hover{ color:var(--bone) }
.saved-bar .button{ white-space:nowrap }
.explore-page:has(.saved-bar:not([hidden])) .explore-footer{ padding-bottom:120px }

/* ---------- Formulario ---------- */
.project-dialog{ width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);color:var(--bone);background:#10151c;border:1px solid var(--line);border-radius:4px;margin:auto;padding:0;overflow:auto }
.project-dialog::backdrop{ -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#05080cb8 }
.project-dialog form{ padding:30px clamp(22px,5vw,40px) 34px }
.dialog-head{ justify-content:space-between;align-items:center;display:flex }
.dialog-head .eyebrow{ margin:0 }
.dialog-close{ color:var(--silver);background:0 0;width:44px;height:44px;margin-right:-12px;font-size:26px;font-weight:300 }
.dialog-close:hover{ color:var(--bone) }
.project-dialog h2{ letter-spacing:-.04em;margin:14px 0 26px;font-size:clamp(26px,4vw,34px) }
.dialog-label{ color:var(--silver);letter-spacing:.14em;text-transform:uppercase;font-size:10px }
.dialog-refs{ border-top:1px solid var(--line);margin:10px 0 26px;padding:0;list-style:none }
.dialog-refs li{ border-bottom:1px solid var(--line);padding:11px 0;font-size:13px }
.dialog-refs li.is-empty{ color:var(--silver) }
.dialog-likes{ border:0;margin:0 0 24px;padding:0 }
.dialog-likes legend{ margin-bottom:12px;padding:0;font-size:14px;font-weight:600 }
.like-options{ flex-wrap:wrap;gap:8px;display:flex }
.like-options label{ cursor:pointer;position:relative }
.like-options input{ opacity:0;position:absolute;inset:0 }
.like-options span{ border:1px solid var(--line);color:var(--silver);border-radius:999px;align-items:center;min-height:36px;padding:0 14px;font-size:12px;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);display:inline-flex }
.like-options input:checked+span{ border-color:var(--accent);color:var(--bone);background:#d6bc9514 }
.like-options input:focus-visible+span{ outline:2px solid var(--accent);outline-offset:2px }
.dialog-field{ flex-direction:column;gap:8px;margin-bottom:18px;display:flex }
.dialog-field span{ color:var(--silver);font-size:12px }
.dialog-field input,.dialog-field textarea{ color:var(--bone);background:#f5f4f008;border:1px solid var(--line);border-radius:3px;padding:12px 14px;font-size:14px }
.dialog-field input:focus-visible,.dialog-field textarea:focus-visible{ border-color:var(--accent);outline:0 }
.dialog-actions{ flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px;display:flex }
.dialog-actions .button{ letter-spacing:.06em;gap:20px }
.dialog-note{ color:var(--silver);font-size:11px }

/* ---------- Responsive ---------- */
@media (max-width:1439px){
  .explore-grid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 26px }
}
@media (max-width:1100px){
  .explore-hero{ grid-template-columns:1fr }
  .explore-hero-preview{ aspect-ratio:auto;gap:12px;margin-top:40px;display:flex }
  .preview-item{ flex:1;width:auto;position:static;box-shadow:0 0 0 1px #e5e7ea1f }
  .explore-toolbar{ grid-template-columns:1fr }
  .explore-search{ border-top:1px solid var(--line);border-bottom:0;margin-top:8px }
}
@media (max-width:767px){
  .explore-hero{ padding-top:clamp(120px,18svh,160px);padding-bottom:26px }
  .explore-hero h1{ font-size:clamp(40px,11.2vw,58px);line-height:1.02 }
  .explore-lede{ margin-top:22px;font-size:14px }
  .explore-hero-bottom{ flex-direction:column;margin-top:36px }
  .explore-hero-preview{ gap:10px;margin-top:30px }
  .preview-item:nth-child(3){ display:none }
  .explore-library{ padding-top:18px }
  .explore-toolbar{ border-bottom:0;gap:6px;padding-bottom:0 }
  .explore-filter-row{ border-bottom:1px solid var(--line);gap:12px;margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter) }
  .explore-filter-label{ flex-basis:auto;font-size:9px }
  /* Cada fila de filtros se desliza por sí sola; el desbordamiento queda dentro. */
  .explore-filters{ scroll-snap-type:x proximity;scrollbar-width:none;flex-wrap:nowrap;gap:22px;padding-right:var(--gutter);overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000);mask-image:linear-gradient(90deg,#000 85%,#0000) }
  .explore-filters::-webkit-scrollbar{ display:none }
  .explore-filter{ flex-shrink:0;min-height:44px }
  .explore-search{ border-top:0;border-bottom:1px solid var(--line) }
  .explore-meta{ flex-direction:column }
  .explore-grid{ grid-template-columns:1fr;gap:52px;margin-top:30px }
  .ref-view{ display:none }
  .ref-name{ font-size:18px }
  .ref-save{ min-height:44px }
  .ref-visit{ min-height:44px }
  .explore-cta .button{ justify-content:space-between;width:100% }
  .explore-cta-actions{ flex-direction:column;align-self:stretch }
  .explore-footer{ grid-template-columns:1fr auto;gap:12px 20px;display:grid }
  .explore-footer img{ width:130px;height:auto }
  .saved-bar{ border-radius:14px;flex-direction:column;align-items:stretch;gap:6px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));bottom:10px;left:10px;right:10px;transform:none }
  .saved-bar>.mono{ text-align:center;padding-top:4px }
  .saved-bar-actions{ justify-content:space-between }
  .saved-bar .button{ flex:1;justify-content:space-between;gap:10px;padding-inline:18px;font-size:10.5px }
  .explore-page:has(.saved-bar:not([hidden])) .explore-footer{ padding-bottom:150px }
}
@media (prefers-reduced-motion:reduce){
  .ref-card,.saved-bar,.preview-item{ animation:none }
  .explore-grid,.ref-image,.explore-page .navbar{ transition:none }
}