/* ============================================================
   DIRECTORIO EMPRESARIAL — /directorio-empresarial/assets/directorio.css
   Same brand palette and type system as antologia.css (self-contained,
   since no shared base stylesheet is guaranteed loaded on this page).
   ============================================================ */

:root{
  --v-blue:#2AACE2;
  --v-teal:#22BEB4;
  --v-green:#8DC63F;
  --v-purple:#6A3FA0;
  --d-blue: #005098;
  --ink:#1C2733;
  --ink-deep:#141C25;
  --paper:#FFFFFF;
  --panel:#F4F7F9;
  --muted:#7C8896;
  --muted-light:#9FB0BE;
  --line: rgba(28,39,51,0.12);
  --grad: linear-gradient(90deg, var(--v-blue), var(--v-teal), var(--v-green));
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Outfit', sans-serif; -webkit-font-smoothing:antialiased;
}

/* ── NAV (identical pattern to antologia's) ── */
.dir-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1180px; margin:0 auto;
}
.dir-logo-lockup{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.dir-powered-by{ font-family:'Outfit', sans-serif; font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap; }
@media (max-width:480px){ .dir-powered-by{ display:none; } }

/* ── HERO ── */
.dir-hero{
  position:relative; overflow:hidden; background:var(--panel); color:var(--ink);
  padding:40px 24px 28px; text-align:center;
}
.dir-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(42,172,226,0.16), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(141,198,63,0.14), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(106,63,160,0.14), transparent 45%);
  pointer-events:none;
}
.dir-hero-inner{ position:relative; max-width:720px; margin:0 auto; }
.dir-hero-logo{ height:96px; width:auto; object-fit:contain; margin-bottom:14px; }
.dir-eyebrow{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px;
}
.dir-headline{
  font-family:'Outfit', sans-serif; font-weight:700; font-size:26px; line-height:1.25;
  color:#005199; margin:0 0 18px; max-width:520px; margin-left:auto; margin-right:auto;
}
@media (max-width:480px){ .dir-headline{ font-size:20px; } }
.dir-hero-rule{ width:64px; height:2px; background:var(--grad); margin:0 auto 14px; border-radius:2px; }
.dir-vol{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em; color:var(--muted); }

/* ── VIEWER ── */
.dir-wrap{ max-width:900px; margin:0 auto; padding:24px 24px 0; }

.dir-search-wrap{ max-width:420px; margin:0 auto 20px; }
.dir-search-input{
  width:100%; padding:13px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-size:14px; font-family:'Outfit',sans-serif; outline:none;
}
.dir-search-input:focus{ border-color:var(--v-blue); }

.dir-book-stage{ display:flex; justify-content:center; position:relative; }
.dir-book{
  position:relative; display:flex; box-shadow:0 16px 36px rgba(28,39,51,0.16);
  border-radius:6px; overflow:hidden; transition:width .3s ease; background:var(--panel);
}
@keyframes dirSlideNext{
  0%{ transform:translateX(24px); opacity:0.4; }
  100%{ transform:translateX(0); opacity:1; }
}
@keyframes dirSlidePrev{
  0%{ transform:translateX(-24px); opacity:0.4; }
  100%{ transform:translateX(0); opacity:1; }
}
.dir-book.slide-next{ animation:dirSlideNext .28s ease; }
.dir-book.slide-prev{ animation:dirSlidePrev .28s ease; }
.dir-book.single{ width:280px; aspect-ratio:650/840; }
.dir-book.spread{ width:100%; max-width:640px; aspect-ratio:1300/840; }
.dir-book-half{ position:relative; flex:1; overflow:hidden; }
.dir-book-half img{ width:100%; height:100%; object-fit:cover; display:block; }
.dir-spine{
  position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.06), rgba(0,0,0,0.25));
  z-index:4; pointer-events:none;
}
.dir-cta-inline{ display:none; } /* superseded by .dir-biz-btn -- see dir-biz-card below */

.dir-nav-row{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px; }
.dir-nav-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(28,39,51,0.1); transition:transform .15s ease;
}
.dir-nav-btn:hover{ transform:scale(1.06); }
.dir-nav-btn:disabled{ opacity:0.3; cursor:default; transform:none; }
.dir-nav-btn-utility{ background:var(--panel); border-color:transparent; }
.dir-page-count{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); min-width:90px; text-align:center; }

.dir-fs-arrow{
  display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.12); color:#fff; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background .15s ease;
}
.dir-fs-arrow:hover{ background:rgba(255,255,255,0.25); }
.dir-fs-arrow:disabled{ opacity:0.25; cursor:default; }
.dir-fs-arrow-prev{ left:16px; }
.dir-fs-arrow-next{ right:16px; }
.dir-book-stage.is-fullscreen{
  display:flex; align-items:center; justify-content:center; background:var(--ink-deep); width:100vw; height:100vh;
}
.dir-book-stage.is-fullscreen .dir-fs-arrow{ display:flex; }
.dir-book-stage.is-fullscreen .dir-book{
  width:auto; height:auto; max-width:92vw; max-height:92vh;
}
.dir-book-stage.is-fullscreen .dir-book.single{ aspect-ratio:650/840; }
.dir-book-stage.is-fullscreen .dir-book.spread{ aspect-ratio:1300/840; }

.dir-current-biz{
  margin-top:24px; max-width:600px; margin-left:auto; margin-right:auto;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.dir-biz-card{
  min-width:190px; max-width:240px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; text-align:left;
  box-shadow:0 6px 16px rgba(28,39,51,0.06); transition:transform .15s ease, box-shadow .15s ease;
}
.dir-biz-card:has(.dir-biz-btn):hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(28,39,51,0.14); }
.dir-biz-name{ font-family:'Fraunces', serif; font-size:15px; font-weight:600; }
.dir-biz-meta{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.4; }
.dir-biz-unmatched{ font-style:italic; opacity:0.7; margin-top:8px; }
.dir-biz-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:9px 15px;
  border-radius:999px; background:var(--v-blue); color:#fff; font-size:12.5px; font-weight:700;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 10px rgba(42,172,226,0.35);
}
.dir-biz-btn:hover{ transform:translateY(-1px) scale(1.02); box-shadow:0 6px 16px rgba(42,172,226,0.5); }

.dir-results-panel{
  margin:32px auto 0; max-width:600px; background:var(--panel); color:var(--ink);
  border-radius:10px; padding:18px 20px; border:1px solid var(--line);
}
.dir-results-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:10px; }
.dir-results-header h3{ font-family:'Fraunces', serif; font-size:14px; margin:0; font-weight:600; }
.dir-search-count{ font-size:11.5px; color:var(--muted); }
.dir-results-list{ list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto; }
.dir-results-list li{
  padding:10px 6px; border-bottom:1px solid var(--line); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:10px; border-radius:6px;
}
.dir-results-list li:last-child{ border-bottom:none; }
.dir-results-list li:hover{ background:var(--paper); }
.dir-results-list li.top-match{ background:rgba(141,198,63,0.12); }
.dir-rl-name{ font-weight:600; font-size:13px; }
.dir-rl-activity{ font-size:11.5px; color:var(--muted); }
.dir-rl-badge{
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--v-blue);
  color:#fff; white-space:nowrap; text-decoration:none; transition:background .15s ease;
}
.dir-rl-badge:hover{ background:#1f8fc4; }

/* ── CLOSING (identical pattern to antologia's) ── */
.dir-closing{ background:var(--ink-deep); color:#fff; text-align:center; padding:60px 24px 48px; margin-top:56px; }
.dir-closing h2{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:30px; margin:0 0 12px;
  background:var(--paper); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dir-closing-meta{ font-size:13px; color:var(--muted-light); margin-bottom:24px; }
.dir-closing-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.dir-cta{
  display:inline-flex; align-items:center; gap:8px; background:var(--v-purple); color:#fff;
  font-weight:600; font-size:14px; padding:13px 26px; border-radius:999px; text-decoration:none;
  border:none; cursor:pointer; font-family:'Outfit', sans-serif;
}
.dir-cta-outline{ background:transparent; border:1.5px solid rgba(255,255,255,0.35); color:#fff; }
.dir-cta-blue{ background:var(--d-blue); color:#fff; }