/* Domingo Sáez — SAGAS premium navigation v2.6
   Fusion between a clean simple dropdown and the custom premium saga cards. */

.navbar .ds-sagas{position:relative;isolation:isolate}
.navbar .ds-sagas-trigger{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:49px;padding:0 16px;background:transparent;border:0;
  color:#fff;font:800 12px Arial,Helvetica,sans-serif;letter-spacing:.055em;
  white-space:nowrap;cursor:pointer;transition:background .22s ease,color .22s ease;
}
.navbar .ds-sagas-trigger:hover,
.navbar .ds-sagas.is-pinned>.ds-sagas-trigger,
.navbar .ds-sagas:focus-within>.ds-sagas-trigger{background:#a90000;color:#fff}
.navbar .ds-sagas-chevron{
  display:inline-block;font-size:12px;font-weight:800;line-height:1;
  color:#fff;vertical-align:middle;transition:transform .22s ease,color .22s ease;
}
.ds-sagas.is-pinned .ds-sagas-chevron,
.ds-sagas:hover .ds-sagas-chevron,
.ds-sagas:focus-within .ds-sagas-chevron{transform:rotate(180deg)}

/* Clean dropdown shell */
.navbar .ds-sagas .ds-sagas-list{
  display:block;position:absolute;top:100%;left:0;
  width:342px;min-width:342px;margin:0;padding:8px;
  list-style:none;border:1px solid rgba(58,30,17,.14);border-top:3px solid #c50a0a;
  border-radius:0 0 12px 12px;background:linear-gradient(180deg,#faf8f7 0%,#f0ece9 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.16),0 2px 0 rgba(255,255,255,.7) inset;
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  z-index:30;overflow:hidden;
}
.navbar .ds-sagas .ds-sagas-list:before{content:'';position:absolute;bottom:100%;left:0;width:100%;height:10px}
.navbar .ds-sagas:hover .ds-sagas-list,
.navbar .ds-sagas.is-pinned .ds-sagas-list,
.navbar .ds-sagas:focus-within .ds-sagas-list{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto
}
.navbar .ds-sagas .ds-sagas-list li{margin:0}
.navbar .ds-sagas .ds-sagas-list li+li{margin-top:6px}

/* Fusion card: clean structure, premium details */
.navbar .ds-sagas .ds-saga-link{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 18px;
  align-items:center;column-gap:13px;min-height:62px;padding:10px 12px!important;
  border:1px solid rgba(110,76,59,.14);border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f2ef 100%);
  color:#231b19!important;line-height:1.2;text-decoration:none!important;
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 2px 6px rgba(0,0,0,.04);
  transition:transform .2s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.navbar .ds-sagas .ds-saga-link:hover,
.navbar .ds-sagas .ds-saga-link:focus-visible{
  background:linear-gradient(180deg,#fffdfb 0%,#f7ece6 100%);
  border-color:rgba(197,10,10,.28);
  box-shadow:0 10px 24px rgba(107,19,19,.10),0 1px 0 rgba(255,255,255,.96) inset;
  transform:translateX(2px);outline:0;
}
.navbar .ds-sagas .ds-saga-link:after{
  content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#df2525 0%,#b70606 100%);opacity:.0;transition:opacity .22s ease;
}
.navbar .ds-sagas .ds-saga-link:hover:after,
.navbar .ds-sagas .ds-saga-link:focus-visible:after{opacity:1}

.ds-saga-emblem{
  width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;
  border-radius:12px;background:linear-gradient(145deg,#d52b3b,#7e1f2b);
  border:1px solid rgba(164,20,39,.75);color:#ffe2b6;
  font-family:Georgia,serif;font-size:26px;font-weight:700;
  box-shadow:0 8px 18px rgba(147,20,34,.22),inset 0 1px 0 rgba(255,255,255,.34);
}
.ds-saga-link>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.navbar .ds-sagas .ds-saga-link strong{
  display:block;margin:0;color:#26201d;font-size:15px;font-weight:800;letter-spacing:0;
}
.navbar .ds-sagas .ds-saga-link small{
  display:block;margin:0;color:#70635e;font-size:11px;letter-spacing:.01em
}
.navbar .ds-sagas .ds-saga-link>span:last-child{
  color:#857973;font-size:20px;font-weight:700;justify-self:end;transition:transform .22s ease,color .22s ease;
}
.navbar .ds-sagas .ds-saga-link:hover>span:last-child,
.navbar .ds-sagas .ds-saga-link:focus-visible>span:last-child{color:#b10b0b;transform:translateX(2px)}

/* Transition overlay preserved, premium cinematic */
.ds-saga-transition{position:fixed;inset:0;z-index:2147483500;background:radial-gradient(circle at center,#4e1327 0%,#170d17 48%,#08070d 100%);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s;overflow:hidden}
.ds-saga-transition.is-active{opacity:1;visibility:visible;pointer-events:all}
.ds-saga-transition:before,.ds-saga-transition:after{content:'';position:absolute;inset:-70%;background:conic-gradient(from 10deg,transparent 0 70%,rgba(229,173,105,.1) 80%,transparent 95%);animation:dsSagaSpin 12s linear infinite}
.ds-saga-transition:after{animation-direction:reverse;animation-duration:16s;opacity:.55}
.ds-saga-transition-core{position:relative;z-index:1;text-align:center;padding:28px;display:grid;justify-items:center;gap:18px;animation:dsSagaReveal 1.1s both}
.ds-saga-transition-ring{width:100px;height:100px;border-radius:50%;border:1px solid rgba(244,201,143,.8);box-shadow:0 0 32px rgba(241,162,109,.3),inset 0 0 30px rgba(202,33,58,.3);background:radial-gradient(circle,rgba(222,159,95,.21),transparent 70%)}
.ds-saga-transition-ring:after{content:'A';font:58px Georgia,serif;color:#efc98b;line-height:96px}
.ds-saga-transition-kicker{color:#f3bf9a;font:600 11px Arial,sans-serif;letter-spacing:.28em}
.ds-saga-transition-title{font:clamp(35px,7vw,88px) Georgia,serif;letter-spacing:.06em;text-shadow:0 8px 38px #cc21458a}
.ds-saga-transition-hint{font:600 10px Arial,sans-serif;letter-spacing:.22em;color:#d7b6ad}
@keyframes dsSagaSpin{to{transform:rotate(360deg)}}
@keyframes dsSagaReveal{from{transform:scale(.89);opacity:0}to{transform:scale(1);opacity:1}}

/* Language-specific items */
html[data-ds-lang="es"] .ds-sagas-list a[data-ds-saga="en"],
html[data-ds-lang="en"] .ds-sagas-list a[data-ds-saga="es"]{display:none!important}

@media(max-width:1100px){
  .navbar .ds-sagas-trigger{width:100%;height:43px;justify-content:space-between}
  .navbar .ds-sagas .ds-sagas-list{
    position:static;width:100%;min-width:0;max-height:0;overflow:hidden;
    padding:0 8px;border-width:0;border-top:0;border-radius:0;box-shadow:none;
    transform:none;opacity:0;visibility:hidden;
    transition:max-height .28s ease,opacity .2s ease,padding .2s ease;
  }
  .navbar .ds-sagas:hover .ds-sagas-list:not(:focus-within){max-height:0;padding:0 8px;opacity:0;visibility:hidden}
  .navbar .ds-sagas.is-pinned .ds-sagas-list,
  .navbar .ds-sagas:focus-within .ds-sagas-list{max-height:420px;padding:8px;opacity:1;visibility:visible}
  .navbar .ds-sagas .ds-sagas-list:before{display:none}
}

@media(prefers-reduced-motion:reduce){
  .ds-saga-transition:before,.ds-saga-transition:after,.ds-saga-transition-core{animation:none!important}
  .ds-saga-transition,.navbar .ds-sagas .ds-sagas-list,.navbar .ds-sagas .ds-saga-link{transition:none!important}
}

/* v2.7 — touch dropdown fully aligned with other menu items */
@media(max-width:1100px){
 .navbar .nav-links .ds-sagas{width:100%;position:relative;isolation:auto}
 .navbar .nav-links .ds-sagas-trigger{
   display:flex;justify-content:space-between;align-items:center;
   width:100%;height:auto;min-height:46px;padding:12px 14px;
   text-align:left;font-size:13px;font-weight:800;line-height:1.35;
   border:0;border-radius:0;background:transparent;color:#fff;
 }
 .navbar .nav-links .ds-sagas-trigger:focus-visible{outline:2px solid #fff;outline-offset:-3px}
 .navbar .nav-links .ds-sagas .ds-sagas-list{
   display:none;position:static;top:auto;left:auto;width:100%;min-width:0;max-width:100%;
   max-height:none;margin:0;padding:8px;border:0;border-radius:8px;
   background:#f5f1ee;box-shadow:none;overflow:visible;
   opacity:1;visibility:visible;transform:none;pointer-events:auto;
 }
 .navbar .nav-links .ds-sagas .ds-sagas-list:before{display:none}
 .navbar .nav-links .ds-sagas:hover .ds-sagas-list,
 .navbar .nav-links .ds-sagas:focus-within .ds-sagas-list{display:none}
 .navbar .nav-links .ds-sagas.is-pinned>.ds-sagas-list,
 .navbar .nav-links .ds-sagas.is-pinned:hover>.ds-sagas-list,
 .navbar .nav-links .ds-sagas.is-pinned:focus-within>.ds-sagas-list{display:block;max-height:none;padding:8px;opacity:1;visibility:visible}
 .navbar .nav-links .ds-sagas .ds-saga-link{display:grid;min-height:68px;width:100%;padding:10px 12px!important;touch-action:manipulation}
 .navbar .nav-links .ds-sagas .ds-saga-link strong{font-size:14px}
 .navbar .nav-links .ds-sagas .ds-saga-link small{font-size:11px}
}