/* ===========================================================
   EDU SPORTIVO 2026 FOUNDATION
   Compatible with OJS 3.3.0-20 (Custom Theme)
   Add this file at the END of styleSheet.css
   =========================================================== */

:root{
  --es-primary:#F57C00;
  --es-secondary:#D95D00;
  --es-accent:#FFCC80;
  --es-light:#FFF7ED;
  --es-dark:#1F2937;
  --es-shadow:rgba(249,115,22,.20);
}

.es2026-home{
  width:100%;
  max-width:1180px;
  margin:16px auto;
  padding:0 12px;
  font-family:"Segoe UI",Arial,sans-serif;
}

.es2026-banner{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:260px;
  overflow:hidden;
  border-radius:20px;
  padding:30px 42px;
  background:
    linear-gradient(135deg,rgba(245,124,0,.96),rgba(217,93,0,.90)),
    radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 40%);

  box-shadow:0 12px 30px var(--es-shadow);
}

.es2026-banner{
  transition:.4s ease;
}

.es2026-banner:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.es2026-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("https://images.unsplash.com/photo-1526232761682-d26e03ac148e?auto=format&fit=crop&w=2200&q=80") center center/cover no-repeat;
  opacity:.28;
}

.es2026-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(249,115,22,.88),rgba(234,88,12,.72));
}

.es2026-content{
  position:relative;
  z-index:10;
  color:#fff;
  width:100%;
  max-width:900px;
}

.es2026-badge{
  display:inline-block;
  padding:8px 18px;
  border-radius:40px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.40);
  margin-bottom:18px;
  font-size:11px; letter-spacing:2px; font-weight:700;
}

.es2026-title{
  font-size:56px;
  line-height:.95;
  font-weight:900;
  margin:0 0 2px;
  color:#fff;
}

.es2026-subtitle{
  font-size:24px;
  color:#FFFFFF;
  margin:2px 0 10px;
  font-weight:700;
}

.es2026-text{
  color:#fff;
  line-height:1.65;
  max-width:840px;
  margin-top:6px;
  font-size:15px;
}

.es2026-btn{
  display:inline-block;
  margin:6px 10px 0 0;
  padding:11px 22px;
  font-size:13px;
  border-radius:40px;
  background:#fff;
  color:var(--es-secondary)!important;
  text-decoration:none!important;
  font-weight:700;
  transition:all .35s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.es2026-btn:hover{
  background:var(--es-accent);
  color:#6b2d00!important;
  transform:translateY(-4px);
  box-shadow:0 18px 36px var(--es-shadow);
}

.es2026-btn-primary{
  background:var(--es-dark);
  color:#fff!important;
}

.es2026-btn-primary:hover{
  background:#000;
  color:#fff!important;
}

.es2026-card{
  background:#fff;
  border:1px solid #FED7AA;
  border-radius:18px;
  padding:24px;
  margin:24px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:.3s;
}

.es2026-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}

.es2026-grid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.es2026-col{
  flex:1 1 280px;
}

.es2026-metric{
  background:#fff;
  border:1px solid #FED7AA;
  border-radius:16px;
  text-align:center;
  padding:20px;
}

.es2026-metric strong{
  display:block;
  color:var(--es-secondary);
  font-size:24px;
}

@media(max-width:768px){
  .es2026-banner{
    min-height:200px;
    padding:20px 24px;
  }
  .es2026-title{
    font-size:38px;
  }
  .es2026-subtitle{
    font-size:24px;
  }
}


.es2026-home .es2026-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  align-items:center;
}

.es2026-home .es2026-buttons .es2026-btn{
  margin:0;
}

@media(max-width:768px){
 .es2026-content{max-width:100%;}
 .es2026-title{font-size:30px;}
 .es2026-subtitle{font-size:17px;}
 .es2026-text{font-size:14px;}
 .es2026-banner{padding:22px 24px; min-height:260px;}
}



.es2026-home .es2026-content{
  animation:fadeUp .8s ease;
}


@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* Reserved namespace for About Journal
   Use only classes beginning with .es-about-
   This prevents conflicts with .es2026-* hero styles.
*/


.es2026-banner::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(to right,rgba(0,0,0,.08),transparent 55%);
 pointer-events:none;
}

.es2026-title{
 text-shadow:0 3px 12px rgba(0,0,0,.22);
}

.es2026-btn{
 backdrop-filter:blur(4px);
}

.es2026-btn-primary{
 background:#16324F;
}



/* ======================================================
   PREMIUM ANIMATION - Added
====================================================== */

.es2026-banner{
    animation:bannerFade .9s ease;
}

@keyframes bannerFade{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
}

.es2026-badge{animation:badgeSlide 1s ease;}

@keyframes badgeSlide{
    from{opacity:0;transform:translateX(-40px);}
    to{opacity:1;transform:translateX(0);}
}

.es2026-title{animation:titleZoom 1s ease;}

@keyframes titleZoom{
    0%{opacity:0;transform:scale(.85);}
    100%{opacity:1;transform:scale(1);}
}

.es2026-subtitle{animation:subtitleFade 1.2s ease;}

@keyframes subtitleFade{
    from{opacity:0;transform:translateX(30px);}
    to{opacity:1;transform:translateX(0);}
}

.es2026-text{animation:textFade 1.5s ease;}

@keyframes textFade{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

.es2026-btn{
    position:relative;
    overflow:hidden;
}

.es2026-btn-primary{
    animation:pulseButton 2.5s infinite;
}

@keyframes pulseButton{
    0%{transform:scale(1);box-shadow:0 0 0 rgba(245,124,0,.45);}
    50%{transform:scale(1.05);box-shadow:0 0 24px rgba(245,124,0,.45);}
    100%{transform:scale(1);box-shadow:0 0 0 rgba(245,124,0,0);}
}

.es2026-btn-primary::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-25deg);
    animation:shine 3s infinite;
}

@keyframes shine{
    0%{left:-120%;}
    100%{left:160%;}
}

.es2026-banner::before{
    animation:zoomCover 18s ease-in-out infinite alternate;
}

@keyframes zoomCover{
    from{transform:scale(1);}
    to{transform:scale(1.03);}
}



/* ======================================================
   VIEW CURRENT ISSUE BUTTON ANIMATION
====================================================== */

.es-current-btn{
  position:relative;
  overflow:hidden;
  animation:pulseCurrent 2.5s infinite;
  transition:all .35s ease !important;
}

.es-current-btn:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 18px 36px rgba(245,124,0,.40) !important;
}

.es-current-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.60),transparent);
  transform:skewX(-25deg);
  animation:currentShine 3s linear infinite;
}

@keyframes pulseCurrent{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(245,124,0,.35);
  }
  50%{
    transform:scale(1.05);
    box-shadow:0 0 22px rgba(245,124,0,.40);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(245,124,0,0);
  }
}

@keyframes currentShine{
  0%{left:-120%;}
  100%{left:160%;}
}


/* ======================================================
   AIMS & SCOPE SECTION (v7)
====================================================== */

.es-scope{
background:#fff;
border-radius:18px;
padding:30px;
margin:30px 0;
box-shadow:0 10px 28px rgba(0,0,0,.08);
animation:fadeScope .8s ease;
}
@keyframes fadeScope{
from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}
.es-scope-title{
font-size:30px;
font-weight:800;
color:#F57C00;
margin-bottom:10px;
}
.es-scope-desc{
font-size:15px;
line-height:1.8;
color:#555;
margin-bottom:22px;
}
.es-scope-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:16px;
}
.es-scope-card{
position:relative;
overflow:hidden;
background:#FFF7ED;
border-left:5px solid #F57C00;
border-radius:12px;
padding:18px;
transition:.35s ease;
}
.es-scope-card:hover{
transform:translateY(-6px);
background:#fff;
box-shadow:0 16px 32px rgba(245,124,0,.22);
}
.es-scope-card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-25deg);
transition:.7s;
}
.es-scope-card:hover::before{left:160%;}
.es-scope-card h4{
margin:0;
font-size:16px;
color:#333;
font-weight:700;
}
.es-scope-btn{
display:inline-block;
margin-top:26px;
padding:13px 30px;
border-radius:35px;
background:linear-gradient(135deg,#F57C00,#EA580C);
color:#fff!important;
text-decoration:none!important;
font-weight:700;
box-shadow:0 10px 24px rgba(245,124,0,.25);
animation:pulseScope 2.6s infinite;
transition:.35s;
}
.es-scope-btn:hover{transform:translateY(-4px);}
@keyframes pulseScope{
0%{transform:scale(1);}
50%{transform:scale(1.04);}
100%{transform:scale(1);}
}


/* =====================================================
   SIDEBAR MENU PREMIUM - EDU SPORTIVO 2026
=====================================================*/
.pkp_block .content ul{padding:0;margin:0;list-style:none;}
.pkp_block .content ul li{margin-bottom:12px;}
.pkp_block .content ul li a{
display:flex;align-items:center;padding:13px 16px;border-radius:12px;
background:linear-gradient(180deg,#fff,#FFF3E0);
border:1px solid rgba(245,124,0,.12);
color:#E65100!important;font-weight:700;text-decoration:none;
box-shadow:0 5px 15px rgba(245,124,0,.12);
transition:all .35s ease;position:relative;overflow:hidden;}
.pkp_block .content ul li a:hover{
background:linear-gradient(135deg,#F57C00,#EA580C);
color:#fff!important;transform:translateX(6px);
box-shadow:0 12px 26px rgba(245,124,0,.30);}
.pkp_block .content ul li a::before{
content:"➜";display:flex;align-items:center;justify-content:center;
width:34px;height:34px;margin-right:12px;border-radius:50%;
background:#fff;color:#F57C00;font-size:16px;font-weight:bold;
transition:.35s;box-shadow:0 4px 10px rgba(245,124,0,.20);}
.pkp_block .content ul li a:hover::before{transform:rotate(360deg);}
.pkp_block .content ul li a::after{
content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-25deg);transition:.8s;}
.pkp_block .content ul li a:hover::after{left:160%;}


/* =====================================================
   SIDEBAR PREMIUM v9 - EDU SPORTIVO
===================================================== */

.sidebar-es-container{margin-bottom:12px;}

.es-sidebar-btn{
display:flex;
align-items:center;
padding:13px 18px;
border-radius:14px;
text-decoration:none!important;
font-weight:700;
font-size:15px;
color:#fff!important;
background:linear-gradient(135deg,#FB8C00,#F57C00,#EF6C00);
box-shadow:0 6px 18px rgba(245,124,0,.28);
transition:all .35s ease;
overflow:hidden;
position:relative;
}

.es-sidebar-btn:hover{
transform:translateY(-3px);
background:linear-gradient(135deg,#FF9800,#F57C00,#E65100);
box-shadow:0 12px 28px rgba(245,124,0,.40);
}

.es-sidebar-btn:before{
content:"";
position:absolute;
left:-120%;
top:0;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
transform:skewX(-25deg);
transition:.8s;
}

.es-sidebar-btn:hover:before{
left:160%;
}

.es-sidebar-icon{
width:22px;
height:22px;
margin-right:12px;
transition:.35s ease;
}

.es-sidebar-btn:hover .es-sidebar-icon{
transform:scale(1.15) rotate(12deg);
}


/* ======================================================
   PEOPLE BLOCK FINAL ANIMATION v10
====================================================== */

.people-title{
transition:all .35s ease;
}

.people-card{
transition:all .35s ease;
cursor:pointer;
border-radius:10px;
}

.people-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 28px rgba(245,124,0,.30)!important;
}

.people-card:active{
transform:scale(.97);
}

.people-card em.fa{
transition:all .35s ease;
}

.people-card:hover em.fa{
transform:rotate(360deg) scale(1.2);
color:#FF9800!important;
}

.people-card a{
transition:all .3s ease;
display:inline-block;
text-decoration:none;
}

.people-card:hover a{
padding-left:5px;
color:#F57C00!important;
}

.people-card::after{
content:"";
display:block;
position:absolute;
}

.sidebar-es-container,
.people-card{
position:relative;
overflow:hidden;
}

.sidebar-es-container::before,
.people-card::before{
content:"";
position:absolute;
top:0;
left:-130%;
width:55%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
transform:skewX(-25deg);
transition:.8s;
}

.sidebar-es-container:hover::before,
.people-card:hover::before{
left:160%;
}



/* =====================================================
   SIDEBAR SOCIAL ICONS ADD-ON (Non-destructive)
   Added only. Existing CSS remains unchanged.
===================================================== */

.es-social{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:18px;
}

.es-social a{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #F57C00;
border-radius:10px;
background:#fff;
color:#F57C00;
font-size:28px;
text-decoration:none;
transition:all .35s ease;
position:relative;
overflow:hidden;
}

.es-social a:hover{
background:#F57C00;
color:#fff;
transform:translateY(-5px);
box-shadow:0 12px 24px rgba(245,124,0,.30);
}

.es-social a i{
transition:.35s ease;
}

.es-social a:hover i{
transform:rotate(360deg) scale(1.15);
}

.es-social a:before{
content:"";
position:absolute;
top:0;
left:-120%;
width:55%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-25deg);
transition:.8s;
}

.es-social a:hover:before{
left:160%;
}

.es-submit:hover,
.es-reviewer:hover{
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(245,124,0,.28);
}