/* ODE A11-R7-R5 APPROVED FORMATION FRAME
   Native header + native interactive Formation Lunar.
   No full-banner/full-panel raster art is used here. */

:root{
  --ode-r7-bg:#070708;
  --ode-r7-panel:#0b0a0b;
  --ode-r7-panel-2:#11100f;
  --ode-r7-gold:#c9a45a;
  --ode-r7-gold-soft:#8d6c35;
  --ode-r7-ivory:#eadfca;
  --ode-r7-muted:#a79b89;
  --ode-r7-red:#a7212b;
  --ode-r7-red-bright:#d3474f;
  --ode-r7-line:rgba(201,164,90,.34);
}

/* -------------------- HEADER NATIVO -------------------- */

.site-header .brand.ode-r7-brand{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  flex:0 1 auto!important;
  padding:8px 0!important;
  text-decoration:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

.ode-r7-brand-mark{
  position:relative;
  flex:0 0 64px;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  isolation:isolate;
}

.ode-r7-brand-mark::before,
.ode-r7-brand-mark::after{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(201,164,90,.44);
  border-radius:50%;
  pointer-events:none;
}

.ode-r7-brand-mark::after{
  inset:12px;
  border-style:dashed;
  opacity:.55;
  transform:rotate(24deg);
}

.ode-r7-brand-mark img{
  display:block;
  width:56px;
  height:56px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(201,164,90,.18));
}

.ode-r7-brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.ode-r7-brand-copy strong{
  color:var(--ode-r7-ivory);
  font:700 clamp(1.25rem,1.8vw,2rem)/1.05 Georgia,"Times New Roman",serif;
  letter-spacing:.045em;
  white-space:nowrap;
  text-shadow:0 4px 18px rgba(0,0,0,.72);
}

.ode-r7-brand-copy small{
  color:var(--ode-r7-gold);
  font:700 .68rem/1.1 Arial,sans-serif;
  letter-spacing:.23em;
  text-transform:uppercase;
  white-space:nowrap;
}

.site-header .version-chip.ode-r7-arco{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:235px!important;
  width:auto!important;
  height:52px!important;
  padding:0 22px!important;
  margin:0!important;
  border:1px solid rgba(201,164,90,.48)!important;
  border-radius:2px!important;
  background:
    linear-gradient(180deg,rgba(28,24,18,.92),rgba(9,9,9,.96))!important;
  color:var(--ode-r7-ivory)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    inset 0 0 26px rgba(201,164,90,.035),
    0 8px 24px rgba(0,0,0,.26)!important;
  overflow:visible!important;
}

.site-header .version-chip.ode-r7-arco::before,
.site-header .version-chip.ode-r7-arco::after{
  content:"";
  position:absolute;
  top:50%;
  width:18px;
  height:18px;
  border:1px solid rgba(201,164,90,.46);
  background:#0b0a0b;
  transform:translateY(-50%) rotate(45deg);
  z-index:0;
}

.site-header .version-chip.ode-r7-arco::before{left:-10px}
.site-header .version-chip.ode-r7-arco::after{right:-10px}

.ode-r7-arco-jewel{
  position:relative;
  z-index:1;
  width:13px;
  height:13px;
  flex:0 0 13px;
  transform:rotate(45deg);
  border:1px solid rgba(241,184,95,.74);
  background:
    radial-gradient(circle at 38% 36%,#ff9ca0 0 9%,#cf3440 18%,#7e111a 58%,#250609 100%);
  box-shadow:0 0 11px rgba(211,71,79,.54);
}

.ode-r7-arco-text{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:#dec89e;
  font:700 .68rem/1 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ode-r7-arco-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ode-r7-red-bright);
  box-shadow:0 0 8px rgba(211,71,79,.72);
}

/* -------------------- FORMACION NATIVA -------------------- */

.experience-section .experience-grid{
  grid-template-columns:minmax(0,1fr)!important;
  gap:34px!important;
}

.formation-stage.ode-r7-native-formation{
  position:relative!important;
  width:min(100%,1320px)!important;
  max-width:1320px!important;
  min-height:760px!important;
  aspect-ratio:auto!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(201,164,90,.32)!important;
  border-radius:3px!important;
  background:
    radial-gradient(circle at 66% 46%,rgba(201,164,90,.055),transparent 25%),
    linear-gradient(180deg,rgba(9,9,9,.96),rgba(7,7,8,.99))!important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.012)!important;
}

.formation-stage.ode-r7-native-formation::before,
.formation-stage.ode-r7-native-formation::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.formation-stage.ode-r7-native-formation::before{
  inset:0;
  background:
    linear-gradient(90deg,transparent 49.92%,rgba(201,164,90,.08) 50%,transparent 50.08%),
    linear-gradient(0deg,transparent 49.92%,rgba(201,164,90,.055) 50%,transparent 50.08%),
    repeating-radial-gradient(circle at 66% 47%,transparent 0 72px,rgba(201,164,90,.045) 73px 74px,transparent 75px 108px);
  opacity:.9;
}

.formation-stage.ode-r7-native-formation::after{
  inset:10px;
  border:1px solid rgba(201,164,90,.13);
  box-shadow:inset 0 0 70px rgba(0,0,0,.7);
}

.ode-r7-formation{
  position:relative;
  z-index:1;
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(620px,1.55fr);
  grid-template-rows:auto 1fr auto;
}

.ode-r7-formation-head{
  grid-column:1/-1;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 26px;
  border-bottom:1px solid rgba(201,164,90,.27);
  background:
    linear-gradient(180deg,rgba(20,18,15,.94),rgba(8,8,8,.95));
}

.ode-r7-formation-title{
  position:relative;
  padding:14px clamp(28px,5vw,76px);
  color:#e5d5b5;
  font:700 clamp(1.28rem,2.3vw,2.15rem)/1 Georgia,"Times New Roman",serif;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-align:center;
}

.ode-r7-formation-title::before,
.ode-r7-formation-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:clamp(32px,6vw,76px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,90,.72));
}

.ode-r7-formation-title::before{
  right:100%;
}
.ode-r7-formation-title::after{
  left:100%;
  transform:scaleX(-1);
}

.ode-r7-info{
  position:relative;
  z-index:2;
  padding:46px 36px 34px;
  border-right:1px solid rgba(201,164,90,.25);
  background:
    linear-gradient(180deg,rgba(12,11,11,.72),rgba(8,8,9,.93));
}

.ode-r7-info::after{
  content:"";
  position:absolute;
  left:36px;
  right:36px;
  bottom:26px;
  height:140px;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(ellipse at 50% 92%,rgba(201,164,90,.3),transparent 32%),
    linear-gradient(165deg,transparent 42%,rgba(201,164,90,.09) 43% 44%,transparent 45%);
  mask-image:linear-gradient(to bottom,transparent,#000);
}

.ode-r7-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 10px;
  color:#bda477;
  font:700 .66rem/1 Arial,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.ode-r7-eyebrow::before,
.ode-r7-eyebrow::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,rgba(201,164,90,.42));
}
.ode-r7-eyebrow::after{transform:scaleX(-1)}

.ode-r7-position{
  margin:20px 0 10px;
  color:#ead9b9;
  font:700 clamp(2.4rem,5vw,4.7rem)/.92 Georgia,"Times New Roman",serif;
  letter-spacing:.01em;
  text-shadow:0 8px 30px rgba(0,0,0,.62);
}

.ode-r7-position-rule{
  position:relative;
  width:100%;
  height:28px;
  margin:0 0 24px;
}
.ode-r7-position-rule::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,90,.5),transparent);
}
.ode-r7-position-rule::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:10px;height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#8d171f;
  border:1px solid rgba(225,174,93,.8);
  box-shadow:0 0 12px rgba(211,71,79,.45);
}

.ode-r7-position-copy{
  margin:0 0 28px;
  color:#a99f91;
  font:400 .96rem/1.65 Georgia,"Times New Roman",serif;
}

.ode-r7-hero-summary{
  position:relative;
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:18px 0;
  border-top:1px solid rgba(201,164,90,.18);
  border-bottom:1px solid rgba(201,164,90,.18);
}

.ode-r7-summary-portrait{
  width:74px;
  height:74px;
  overflow:hidden;
  border-radius:50%;
  border:1px solid rgba(201,164,90,.52);
  background:#090909;
  box-shadow:0 0 0 4px rgba(201,164,90,.035);
}

.ode-r7-summary-portrait img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.42));
}

.ode-r7-hero-summary strong{
  display:block;
  color:#e0c89a;
  font:700 1.25rem/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ode-r7-hero-summary span,
.ode-r7-hero-summary small{
  display:block;
  margin-top:5px;
  color:#a99677;
  font:700 .64rem/1.25 Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ode-r7-hero-summary small{
  color:#b44549;
}

.ode-r7-details-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  padding:10px 14px;
  border:1px solid rgba(201,164,90,.37);
  color:#d8c399;
  text-decoration:none;
  font:700 .66rem/1 Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:.18s ease;
}
.ode-r7-details-link:hover,
.ode-r7-details-link:focus-visible{
  border-color:rgba(201,164,90,.72);
  background:rgba(201,164,90,.06);
  outline:none;
}

.ode-r7-orbit{
  position:relative;
  min-height:590px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 49%,rgba(201,164,90,.09),transparent 19%),
    radial-gradient(circle at 50% 49%,transparent 0 29%,rgba(201,164,90,.09) 29.2% 29.4%,transparent 29.7% 40%,rgba(201,164,90,.05) 40.2% 40.4%,transparent 40.7%);
}

.ode-r7-orbit::before,
.ode-r7-orbit::after{
  content:"";
  position:absolute;
  left:50%;
  top:49%;
  border:1px solid rgba(201,164,90,.13);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.ode-r7-orbit::before{
  width:68%;
  aspect-ratio:1;
}
.ode-r7-orbit::after{
  width:52%;
  aspect-ratio:1;
  border-style:dashed;
  animation:odeR7Orbit 42s linear infinite;
}

@keyframes odeR7Orbit{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

.ode-r7-eclipse{
  position:absolute;
  left:50%;
  top:49%;
  width:126px;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 49% 50%,#050505 0 58%,#16110a 59% 61%,#b78237 63% 66%,#f0cf85 67% 68%,rgba(234,193,103,.18) 71%,transparent 73%);
  box-shadow:
    0 0 18px rgba(221,176,91,.42),
    0 0 54px rgba(201,164,90,.18);
  z-index:1;
}

.ode-r7-eclipse::before,
.ode-r7-eclipse::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:310px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,90,.17),transparent);
  transform:translate(-50%,-50%);
}
.ode-r7-eclipse::after{transform:translate(-50%,-50%) rotate(90deg)}

.ode-r7-slot{
  --slot-x:50%;
  --slot-y:50%;
  position:absolute;
  left:var(--slot-x);
  top:var(--slot-y);
  width:154px;
  min-height:190px;
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  z-index:4;
  transition:transform .18s ease,filter .18s ease;
}

.ode-r7-slot:hover{
  transform:translate(-50%,-50%) translateY(-4px);
  filter:brightness(1.08);
}

.ode-r7-slot:focus-visible{
  outline:1px solid rgba(231,192,112,.88);
  outline-offset:7px;
}

.ode-r7-slot[data-slot="01"]{--slot-x:28%;--slot-y:24%}
.ode-r7-slot[data-slot="02"]{--slot-x:72%;--slot-y:24%}
.ode-r7-slot[data-slot="04"]{--slot-x:25%;--slot-y:62%}
.ode-r7-slot[data-slot="03"]{--slot-x:75%;--slot-y:62%}
.ode-r7-slot[data-slot="05"]{--slot-x:50%;--slot-y:79%}

.ode-r7-slot-frame{
  position:relative;
  width:116px;
  height:116px;
  margin:0 auto;
  padding:8px;
  border-radius:50%;
  border:1px solid rgba(201,164,90,.56);
  background:
    radial-gradient(circle at 50% 45%,rgba(201,164,90,.08),transparent 67%),
    #090909;
  box-shadow:
    0 0 0 5px rgba(201,164,90,.025),
    0 12px 26px rgba(0,0,0,.42);
  transition:.18s ease;
}

.ode-r7-slot-frame::before,
.ode-r7-slot-frame::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:1px solid rgba(201,164,90,.24);
  transform:rotate(45deg);
  pointer-events:none;
}
.ode-r7-slot-frame::after{
  inset:7px;
  border-radius:50%;
  transform:none;
  border-color:rgba(255,255,255,.025);
}

.ode-r7-slot img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(.98) contrast(1.03) brightness(.94) drop-shadow(0 5px 7px rgba(0,0,0,.46));
  transition:.18s ease;
}

.ode-r7-slot-number{
  position:absolute;
  left:50%;
  bottom:-17px;
  z-index:3;
  min-width:42px;
  padding:5px 8px;
  transform:translateX(-50%);
  border:1px solid rgba(201,164,90,.55);
  background:#0a0909;
  color:#dfc68e;
  font:700 .82rem/1 Georgia,"Times New Roman",serif;
  letter-spacing:.08em;
  box-shadow:0 5px 14px rgba(0,0,0,.42);
}

.ode-r7-slot-name{
  display:block;
  margin-top:28px;
  color:#cdb583;
  font:700 .72rem/1.1 Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ode-r7-slot-role{
  display:block;
  margin-top:5px;
  color:#817564;
  font:700 .56rem/1.1 Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ode-r7-slot.is-selected .ode-r7-slot-frame{
  border-color:rgba(232,185,90,.88);
  box-shadow:
    0 0 0 4px rgba(174,29,37,.18),
    0 0 0 8px rgba(201,164,90,.045),
    0 0 34px rgba(185,39,46,.34),
    0 12px 26px rgba(0,0,0,.48);
}
.ode-r7-slot.is-selected .ode-r7-slot-frame::before{
  border-color:rgba(197,43,51,.8);
  box-shadow:0 0 16px rgba(211,71,79,.3);
}
.ode-r7-slot.is-selected img{
  filter:saturate(1.06) contrast(1.05) brightness(1);
}
.ode-r7-slot.is-selected .ode-r7-slot-name{
  color:#ead6a7;
}
.ode-r7-slot.is-selected .ode-r7-slot-role{
  color:#b94a50;
}

.ode-r7-formation-foot{
  grid-column:1/-1;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 30px;
  border-top:1px solid rgba(201,164,90,.25);
  background:linear-gradient(180deg,rgba(11,10,9,.88),rgba(7,7,7,.98));
}

.ode-r7-foot-left,
.ode-r7-foot-right{
  display:flex;
  align-items:center;
  gap:13px;
}

.ode-r7-foot-mark{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid rgba(201,164,90,.48);
  display:grid;
  place-items:center;
  color:#d5bd86;
  font-size:1.05rem;
  box-shadow:inset 0 0 14px rgba(201,164,90,.08);
}

.ode-r7-foot-left strong,
.ode-r7-foot-right strong{
  color:#d5bd91;
  font:700 .76rem/1 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ode-r7-foot-left small{
  display:block;
  margin-top:4px;
  color:#7f7467;
  font-size:.68rem;
}

.ode-r7-foot-arrow{
  color:#d7b56d;
  font-size:1.25rem;
}

@media(max-width:1120px){
  .ode-r7-formation{
    grid-template-columns:300px minmax(0,1fr);
  }
  .ode-r7-slot{
    width:132px;
  }
  .ode-r7-slot-frame{
    width:100px;height:100px;
  }
}

@media(max-width:900px){
  .site-header .version-chip.ode-r7-arco{
    display:none!important;
  }
  .ode-r7-brand-mark{
    width:52px;height:52px;flex-basis:52px;
  }
  .ode-r7-brand-mark img{
    width:46px;height:46px;
  }
  .ode-r7-brand-copy strong{
    font-size:1.2rem;
  }
  .ode-r7-brand-copy small{
    font-size:.56rem;
    letter-spacing:.16em;
  }
  .formation-stage.ode-r7-native-formation{
    min-height:0!important;
  }
  .ode-r7-formation{
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
  }
  .ode-r7-info{
    grid-column:1;
    border-right:0;
    border-bottom:1px solid rgba(201,164,90,.22);
    padding:28px 26px;
  }
  .ode-r7-position{
    font-size:2.8rem;
  }
  .ode-r7-orbit{
    min-height:610px;
  }
  .ode-r7-formation-foot{
    grid-column:1;
  }
}

@media(max-width:640px){
  .ode-r7-brand-copy strong{
    font-size:1rem;
    letter-spacing:.02em;
  }
  .ode-r7-brand-copy small{
    display:none;
  }
  .ode-r7-formation-head{
    min-height:72px;
  }
  .ode-r7-formation-title{
    font-size:1rem;
    padding-inline:20px;
  }
  .ode-r7-formation-title::before,
  .ode-r7-formation-title::after{
    display:none;
  }
  .ode-r7-info{
    padding:24px 20px;
  }
  .ode-r7-orbit{
    min-height:520px;
  }
  .ode-r7-eclipse{
    width:92px;
  }
  .ode-r7-slot{
    width:105px;
    min-height:150px;
  }
  .ode-r7-slot-frame{
    width:78px;height:78px;padding:6px;
  }
  .ode-r7-slot-name{
    margin-top:24px;
    font-size:.6rem;
  }
  .ode-r7-slot-role{
    font-size:.48rem;
  }
  .ode-r7-slot[data-slot="01"]{--slot-x:27%;--slot-y:22%}
  .ode-r7-slot[data-slot="02"]{--slot-x:73%;--slot-y:22%}
  .ode-r7-slot[data-slot="04"]{--slot-x:23%;--slot-y:60%}
  .ode-r7-slot[data-slot="03"]{--slot-x:77%;--slot-y:60%}
  .ode-r7-slot[data-slot="05"]{--slot-x:50%;--slot-y:80%}
  .ode-r7-formation-foot{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* R7-R2: responsive header at browser 100% */
@media (min-width:901px){
  .site-header{
    display:grid!important;
    grid-template-columns:minmax(300px,420px) minmax(560px,1fr) minmax(300px,390px)!important;
    align-items:center!important;
    column-gap:clamp(16px,1.7vw,34px)!important;
    padding-inline:clamp(28px,3vw,62px)!important;
  }
  .site-header .brand.ode-r7-brand{
    justify-self:start!important;
    width:100%!important;
    max-width:420px!important;
    gap:10px!important;
  }
  .ode-r7-brand-mark{width:52px!important;height:52px!important;flex-basis:52px!important}
  .ode-r7-brand-mark img{width:46px!important;height:46px!important}
  .ode-r7-brand-copy strong{
    font-size:clamp(1.25rem,1.42vw,1.72rem)!important;
    letter-spacing:.035em!important;
  }
  .ode-r7-brand-copy small{
    font-size:.59rem!important;
    letter-spacing:.17em!important;
  }
  .site-header .main-nav{
    justify-self:center!important;
    min-width:0!important;
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:clamp(14px,1.65vw,30px)!important;
  }
  .site-header .main-nav a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    font-size:clamp(.59rem,.67vw,.72rem)!important;
    letter-spacing:.16em!important;
  }
  .site-header .version-chip.ode-r7-arco{
    justify-self:end!important;
    min-width:0!important;
    width:min(100%,390px)!important;
    height:48px!important;
    padding-inline:18px!important;
  }
  .ode-r7-arco-text{
    min-width:0!important;
    font-size:clamp(.54rem,.59vw,.64rem)!important;
    letter-spacing:.12em!important;
  }
}

@media (min-width:901px) and (max-width:1550px){
  .site-header{
    grid-template-columns:minmax(245px,330px) minmax(500px,1fr) minmax(250px,315px)!important;
    column-gap:16px!important;
    padding-inline:26px!important;
  }
  .ode-r7-brand-copy strong{font-size:1.3rem!important}
  .ode-r7-brand-copy small{display:none!important}
  .site-header .main-nav{gap:16px!important}
  .site-header .main-nav a{font-size:.57rem!important;letter-spacing:.12em!important}
  .site-header .version-chip.ode-r7-arco{width:300px!important;padding-inline:14px!important}
  .ode-r7-arco-text{font-size:.53rem!important;letter-spacing:.095em!important}
}

@media (min-width:901px) and (max-width:1250px){
  .site-header{
    grid-template-columns:minmax(220px,285px) minmax(470px,1fr)!important;
  }
  .site-header .version-chip.ode-r7-arco{display:none!important}
}

/* Remove diagonal geometry behind hero sprites. */
.ode-r7-slot-frame::before,
.ode-r7-slot-frame::after{
  display:none!important;
  content:none!important;
}
.ode-r7-slot-frame{
  box-shadow:0 0 0 1px rgba(201,164,90,.18),0 10px 24px rgba(0,0,0,.42)!important;
}
.ode-r7-slot.is-selected .ode-r7-slot-frame{
  box-shadow:0 0 0 3px rgba(174,29,37,.16),0 0 25px rgba(185,39,46,.26),0 12px 26px rgba(0,0,0,.48)!important;
}

/* Lower experience tabs. */
.experience-copy .tab-list button{cursor:pointer!important}
.experience-copy .tab-list button.is-active{color:#e8d7b8!important}
.experience-copy .tab-panel.ode-r7-tab-refresh{animation:odeR7TabRefresh .18s ease-out}
@keyframes odeR7TabRefresh{
  from{opacity:.35;transform:translateY(3px)}
  to{opacity:1;transform:none}
}


/* ============================================================
   A11-R7-R5 - APPROVED GLOBAL FORMATION FRAME
   Exact approved image as one backdrop for all five heroes.
   No individual hero backplates.
   ============================================================ */

.ode-r7-slot-frame{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.ode-r7-slot-frame::before,
.ode-r7-slot-frame::after{
  display:none!important;
  content:none!important;
}

.ode-r7-slot img{
  border-radius:0!important;
  background:transparent!important;
}

/* The approved frame is the only visual panel behind the full formation. */
.ode-r7-orbit{
  position:relative!important;
  isolation:isolate!important;
  min-height:590px!important;
  overflow:visible!important;
  margin:10px 16px 14px!important;
  border:0!important;
  border-radius:0!important;
  background-color:#050506!important;
  background-image:
    url("/assets/images/ode-brand/ode-formation-global-frame-approved.png?v=20260818r7r5")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  box-shadow:
    0 22px 52px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(201,164,90,.035)!important;
}

/* The approved art already contains its own rings and ornaments. */
.ode-r7-orbit::before,
.ode-r7-orbit::after{
  display:none!important;
  content:none!important;
}

/* Keep the live eclipse and heroes above the approved frame. */
.ode-r7-eclipse,
.ode-r7-slot{
  z-index:3!important;
}

/* Preserve the external rectangle as the current slot selection cue. */
.ode-r7-slot.is-selected{
  outline:1px solid rgba(220,184,104,.80)!important;
  outline-offset:10px!important;
}

.ode-r7-slot:focus-visible{
  outline:1px solid rgba(231,192,112,.92)!important;
  outline-offset:10px!important;
}

/* Do not frame the hero image itself when selected. */
.ode-r7-slot.is-selected .ode-r7-slot-frame{
  border:0!important;
  box-shadow:none!important;
}

@media(max-width:1120px){
  .ode-r7-orbit{
    min-height:560px!important;
    margin:10px 12px 14px!important;
  }
}

@media(max-width:900px){
  .ode-r7-orbit{
    min-height:610px!important;
    margin:12px!important;
  }
}

@media(max-width:640px){
  .ode-r7-orbit{
    min-height:520px!important;
    margin:8px!important;
  }
}