/* =========================================================
   AERIS V45 — YOUTH VISUAL SYSTEM
   DESIGN-ONLY LAYER: no sections/content/logic changed.
   Goals: high contrast, energetic color, depth, motion,
   clear hierarchy, readable overlays, polished mobile.
   ========================================================= */

:root{
  --y-bg:#071725;
  --y-bg2:#0b2c3a;
  --y-surface:#ffffff;
  --y-surface2:#f2f8f7;
  --y-text:#0a1f2a;
  --y-muted:#536c75;
  --y-cyan:#55dcff;
  --y-mint:#54e6c4;
  --y-violet:#9b86ff;
  --y-lime:#b9f56f;
  --y-gold:#ffd166;
  --y-line:#d7e9e5;
  --y-shadow:0 22px 65px rgba(4,29,40,.12);
}

/* ---------- Global atmosphere ---------- */
html{background:var(--y-surface2)}
body{
  background:
    radial-gradient(circle at 7% 8%,rgba(84,230,196,.09),transparent 23%),
    radial-gradient(circle at 93% 24%,rgba(155,134,255,.07),transparent 24%),
    linear-gradient(180deg,#f7fcfb 0%,#eef8f5 48%,#f7fbfa 100%);
  color:var(--y-text);
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.28;
  background-image:
    linear-gradient(rgba(7,23,37,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,23,37,.025) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}

/* ---------- Navigation ---------- */
.nav{
  border-color:rgba(255,255,255,.16);
  background:rgba(5,20,30,.88);
  box-shadow:0 16px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);
}
.nav:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(84,230,196,.08),transparent 35%,rgba(155,134,255,.08));
}
.nav>*{position:relative;z-index:1}
.brandLogo{box-shadow:0 5px 20px rgba(84,230,196,.18)}
.brandText strong{letter-spacing:.1em}
.links a{
  color:#eafffb;
  transition:background .2s,transform .2s,color .2s;
}
.links a:hover,.links a:focus-visible{
  background:linear-gradient(135deg,rgba(84,230,196,.16),rgba(85,220,255,.10));
  color:#fff;
  transform:translateY(-1px);
}
.langSwitch{
  border-color:rgba(84,230,196,.28);
  background:rgba(84,230,196,.08);
}
.langSwitch:hover,.langSwitch:focus-visible{
  background:rgba(84,230,196,.18);
  border-color:rgba(84,230,196,.55);
}

/* ---------- Hero: stronger image readability + energy ---------- */
.hero{
  min-height:96svh;
  background-image:
    radial-gradient(circle at 76% 25%,rgba(84,230,196,.18),transparent 30%),
    linear-gradient(180deg,rgba(4,17,27,.38) 0%,rgba(4,17,27,.64) 42%,rgba(4,17,27,.94) 100%),
    url("https://commons.wikimedia.org/wiki/Special:FilePath/El%20r%C3%ADo%20Cauca.jpg?width=2200");
  background-position:center;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,17,27,.74),transparent 70%),
    radial-gradient(circle at 15% 85%,rgba(84,230,196,.14),transparent 28%);
}
.hero:after{
  height:150px;
  bottom:-72px;
  opacity:.9;
  background:
    radial-gradient(ellipse,rgba(85,220,255,.28) 0 18%,transparent 19%) 0/32% 100%,
    linear-gradient(180deg,transparent,rgba(84,230,196,.08));
  filter:blur(5px);
}
.heroInner{
  padding-top:150px;
  padding-bottom:125px;
  position:relative;
}
.heroLogo{
  border:2px solid rgba(255,255,255,.72);
  box-shadow:0 18px 60px rgba(0,0,0,.46),0 0 0 8px rgba(84,230,196,.08);
}
.heroKicker{
  border-left-color:var(--y-mint);
  background:rgba(4,17,27,.68);
  box-shadow:0 8px 30px rgba(0,0,0,.24);
}
.hero h1{
  max-width:980px;
  text-shadow:0 8px 38px rgba(0,0,0,.62);
}
.hero h1 span{
  background:linear-gradient(90deg,var(--y-mint),var(--y-cyan) 52%,var(--y-lime));
  -webkit-background-clip:text;
  background-clip:text;
}
.hero p{
  color:#f1fffc;
  text-shadow:0 2px 16px rgba(0,0,0,.48);
}
.problemFlow span{
  background:rgba(4,17,27,.66);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 6px 24px rgba(0,0,0,.14);
}
.aerisBadge,.classCard,.tag{
  box-shadow:0 10px 32px rgba(0,0,0,.20);
}

/* ---------- Buttons: clear hierarchy ---------- */
.btn{
  border:1px solid transparent;
  box-shadow:0 9px 26px rgba(4,35,42,.12);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease;
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 32px rgba(4,35,42,.18);
}
.btn:focus-visible,.option:focus-visible,.mapNode:focus-visible,.legacyBtn:focus-visible{
  outline:3px solid rgba(85,220,255,.42);
  outline-offset:3px;
}
.primary{
  background:linear-gradient(135deg,var(--y-mint),var(--y-cyan));
  color:#04202a;
  box-shadow:0 13px 35px rgba(45,210,190,.24);
}
.primary:hover{filter:saturate(1.08) brightness(1.03)}
.ghost{
  background:rgba(4,17,27,.62);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}

/* ---------- Section rhythm ---------- */
section{
  position:relative;
  scroll-margin-top:92px;
}
section:nth-of-type(even){
  background:
    radial-gradient(circle at 10% 10%,rgba(84,230,196,.07),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.58),rgba(236,248,245,.72));
}
section:nth-of-type(odd){
  background:rgba(255,255,255,.34);
}
section:before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(1140px,92%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(84,230,196,.22),rgba(85,220,255,.22),transparent);
}
.top{margin-bottom:30px}
.eyebrow{
  color:#078b78;
  letter-spacing:.16em;
  text-shadow:0 1px 0 #fff;
}
h2{
  color:var(--y-bg);
  text-wrap:balance;
}
.lead{
  color:#4c6670;
  line-height:1.65;
}

/* ---------- Cards: alive without clutter ---------- */
.card,.evidenceCard,.missionMap,.guardianCard{
  box-shadow:var(--y-shadow);
}
.card{
  border-color:var(--y-line);
  background:
    linear-gradient(145deg,#fff 0%,#fbfffe 100%);
}
.card:before,.evidenceCard:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,var(--y-mint),var(--y-cyan),var(--y-violet));
  opacity:.7;
}
.card:hover,.evidenceCard:hover{
  border-color:#b9ddd5;
  box-shadow:0 28px 65px rgba(4,35,42,.15);
}
.card b{color:var(--y-bg)}
.card .big{color:#087f70}
.card .small{color:#526b74}

/* ---------- Story / image blocks ---------- */
.photo{
  box-shadow:var(--y-shadow);
  border:1px solid rgba(255,255,255,.5);
}
.photo:after,.gallery figure:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(84,230,196,.10),transparent 35%,rgba(155,134,255,.10));
  mix-blend-mode:screen;
}
.caption,.gallery figcaption{
  padding-top:70px;
  background:linear-gradient(transparent,rgba(4,17,27,.96));
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

/* ---------- Dark content panels ---------- */
.dark,.pathway,.game,.guardianCard,.evidenceHero{
  box-shadow:0 26px 75px rgba(4,25,36,.22);
}
.dark{
  background:
    radial-gradient(circle at 88% 8%,rgba(155,134,255,.12),transparent 25%),
    radial-gradient(circle at 8% 92%,rgba(84,230,196,.10),transparent 25%),
    linear-gradient(145deg,#061a27,#0b3a48);
  border:1px solid rgba(84,230,196,.16);
}
.dark p{color:#d3ebe6}
.dark .quote{
  border-left-color:var(--y-gold);
  background:rgba(255,209,102,.09);
  color:#eaf6f3;
}
.step .num{
  background:linear-gradient(135deg,rgba(84,230,196,.18),rgba(85,220,255,.12));
  border:1px solid rgba(84,230,196,.18);
}

/* ---------- Gallery ---------- */
.gallery figure{
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 20px 50px rgba(4,29,40,.14);
}
.gallery figure:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 65px rgba(4,29,40,.19);
}

/* ---------- Evidence ---------- */
.evidenceSection{
  background:
    radial-gradient(circle at 88% 15%,rgba(84,230,196,.08),transparent 25%),
    linear-gradient(180deg,#f7fcfb,#eaf7f4);
}
.evidenceHero{
  background:
    radial-gradient(circle at 85% 12%,rgba(84,230,196,.17),transparent 28%),
    radial-gradient(circle at 8% 90%,rgba(155,134,255,.12),transparent 26%),
    linear-gradient(145deg,#061a27,#0c4350);
  border-color:rgba(84,230,196,.22);
}
.evidenceHero p{color:#d8eeea}
.evidenceStats div{
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.13);
}
.evidenceStats b{color:var(--y-mint)}
.evidenceCard{
  position:relative;
  overflow:hidden;
  border-color:var(--y-line);
  background:#fff;
}
.evidenceCard h3{color:var(--y-bg)}
.evidenceCard p{color:#536b74}
.evidenceCard a{color:#087d6d}
.sourceNote{
  background:#fff9e9;
  color:#514c39;
  border-left-color:var(--y-gold);
}

/* ---------- Mission HQ ---------- */
.hqSection{
  background:
    radial-gradient(circle at 92% 75%,rgba(155,134,255,.08),transparent 25%),
    linear-gradient(180deg,#f4fbf9,#e8f7f3);
}
.missionMap{
  border-color:#d3e7e2;
  background:#fff;
}
.missionMapHead h3{color:var(--y-bg)}
.mapNode{
  border-color:#d5e8e3;
  background:linear-gradient(145deg,#f9fdfc,#eef8f5);
}
.mapNode:hover{
  border-color:#80d9c9;
  box-shadow:0 15px 35px rgba(4,35,42,.10);
}
.mapNode.active{
  background:linear-gradient(145deg,#082431,#0d4b58);
  border-color:var(--y-mint);
  box-shadow:0 16px 38px rgba(4,35,42,.24),0 0 0 1px rgba(84,230,196,.12);
}
.mapNode small{color:#536c75}
.mapNode.active small{color:#c5e5df}
.mapIcon{
  background:linear-gradient(145deg,#e3f8f2,#dff4fb);
}
.mapDetail{
  background:linear-gradient(145deg,#f3faf8,#e8f7f3);
  border-color:#d2e8e2;
}
.mapDetail strong{color:#087f70}
.guardianCard{
  background:
    radial-gradient(circle at 82% 18%,rgba(155,134,255,.18),transparent 30%),
    radial-gradient(circle at 12% 85%,rgba(84,230,196,.13),transparent 27%),
    linear-gradient(145deg,#061a27,#0c4350);
}
.guardianAvatar{
  background:linear-gradient(135deg,var(--y-mint),var(--y-cyan));
  box-shadow:0 12px 30px rgba(84,230,196,.20);
}
.guardianCard .rank{color:var(--y-mint)}
.xpBar i,.levelBar i{
  background:linear-gradient(90deg,var(--y-mint),var(--y-cyan),var(--y-violet));
}
.profileStats div,.profileMetrics div{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.13);
}
.profileStats b,.levelMini{color:var(--y-mint)}
.badge.on{
  color:#ffe18a;
  border-color:rgba(255,209,102,.40);
  background:rgba(255,209,102,.09);
}

/* ---------- Mercury lab ---------- */
.labVisual.v43-lab{
  background:
    radial-gradient(circle at 82% 15%,rgba(85,220,255,.12),transparent 26%),
    linear-gradient(145deg,#061a27,#0b4350)!important;
  box-shadow:0 25px 70px rgba(4,25,36,.20);
}
.v43-lab-signal{
  background:rgba(255,255,255,.055);
  border-color:rgba(84,230,196,.15);
}
.v43-lab-signal b{color:#eafffb}
.v43-lab-signal small{color:#9ab9b9}

/* ---------- Challenge / game ---------- */
.gameSection{
  background:
    radial-gradient(circle at 8% 20%,rgba(84,230,196,.10),transparent 24%),
    radial-gradient(circle at 92% 75%,rgba(155,134,255,.11),transparent 25%),
    linear-gradient(180deg,#edf9f6,#e6f4f5);
}
.game.v43-game,.game{
  background:
    radial-gradient(circle at 86% 10%,rgba(155,134,255,.16),transparent 25%),
    radial-gradient(circle at 8% 90%,rgba(84,230,196,.12),transparent 25%),
    linear-gradient(145deg,#071526,#0c3d4d)!important;
  border-color:rgba(155,134,255,.24)!important;
}
.question{
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025)),
    #103845;
  border-color:rgba(255,255,255,.13);
}
.option{
  background:linear-gradient(145deg,#174b58,#143f4d);
  border-color:rgba(255,255,255,.14);
  color:#f4fffd;
}
.option:hover{
  background:linear-gradient(145deg,#1b5965,#174b58);
  border-color:rgba(84,230,196,.56);
  box-shadow:0 10px 25px rgba(0,0,0,.13);
}
.option.selected{
  background:linear-gradient(145deg,#14636b,#17586a);
  border-color:var(--y-mint);
  box-shadow:0 0 0 1px rgba(84,230,196,.16),0 10px 28px rgba(84,230,196,.10);
}
.v43-answer-signal{
  color:#a9c8ce;
  border-color:rgba(85,220,255,.17);
}
.v43-answer-signal.ready{
  color:#bff5e9;
  border-color:rgba(84,230,196,.30);
}
.relic{
  background:linear-gradient(145deg,#0a303a,#0c3a45);
  border-color:rgba(255,255,255,.12);
}
.relic.unlocked{
  border-color:rgba(84,230,196,.48);
  background:linear-gradient(145deg,#0d4b53,#0d3d50);
}
.result{
  background:
    radial-gradient(circle at 85% 15%,rgba(155,134,255,.14),transparent 27%),
    #103943;
  border-color:rgba(84,230,196,.30);
}
.scoreBig{color:var(--y-mint)}

/* ---------- AI: friendly tech, readable chat ---------- */
.guardianAIBox.v43-ai{
  background:
    radial-gradient(circle at 90% 10%,rgba(155,134,255,.14),transparent 25%),
    linear-gradient(145deg,#061a27,#0d3c4c);
  border-color:rgba(85,220,255,.25);
  box-shadow:0 28px 80px rgba(4,25,36,.25);
}
.guardianAIBox.v43-ai .aiHeader{
  background:linear-gradient(135deg,rgba(84,230,196,.10),rgba(155,134,255,.09));
}
.guardianAIBox.v43-ai .aiMsg.bot{
  background:linear-gradient(145deg,#0e3544,#123f4d);
  border-color:rgba(85,220,255,.16);
  color:#ecfbf8;
}
.guardianAIBox.v43-ai .aiMsg.user{
  background:linear-gradient(135deg,var(--y-mint),var(--y-cyan));
  color:#05222c;
  font-weight:650;
}
.guardianAIBox.v43-ai .aiSuggestion{
  background:rgba(85,220,255,.07);
  border-color:rgba(85,220,255,.20);
  color:#eafffb;
}
.guardianAIBox.v43-ai .aiSuggestion:hover{
  background:rgba(84,230,196,.14);
  border-color:rgba(84,230,196,.35);
}
.aiForm input{
  background:#061b25;
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
.aiForm input::placeholder{color:#78969d}
.aiForm input:focus{
  border-color:var(--y-mint);
  box-shadow:0 0 0 3px rgba(84,230,196,.10);
}

/* ---------- Legacy / action cards ---------- */
.legacyGrid.v43-legacyGrid .legacyBtn{
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;
}
.legacyGrid.v43-legacyGrid .legacyBtn:hover{
  transform:translateY(-4px);
  border-color:rgba(84,230,196,.40);
  background:rgba(84,230,196,.07);
  box-shadow:0 15px 34px rgba(0,0,0,.15);
}
#moves .card.v43-moveCard{
  border-color:#d5e8e3;
  background:linear-gradient(145deg,#fff,#f2faf7);
}

/* ---------- Footer: deliberate finish ---------- */
footer{
  background:
    radial-gradient(circle at 85% 15%,rgba(155,134,255,.12),transparent 25%),
    linear-gradient(145deg,#061725,#082d3a);
  border-top:1px solid rgba(84,230,196,.16);
}
footer h3{color:#fff}
footer p,footer li{color:#bdd8d4}
footer a{color:var(--y-mint)}
.v43-footerStrip{
  border-top-color:rgba(255,255,255,.12);
}

/* ---------- Floating controls ---------- */
.ambient,.soundFX{
  border-color:rgba(84,230,196,.22);
  background:rgba(5,20,30,.90);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}
.ambient:hover,.soundFX:hover{
  border-color:rgba(84,230,196,.52);
  box-shadow:0 0 0 5px rgba(84,230,196,.07),0 15px 40px rgba(0,0,0,.30);
}
.toast{
  background:rgba(5,20,30,.96);
  border-color:rgba(84,230,196,.32);
  box-shadow:0 15px 40px rgba(0,0,0,.28);
}

/* ---------- Consistent focus + selection ---------- */
::selection{
  background:rgba(84,230,196,.30);
  color:#061a27;
}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid rgba(85,220,255,.40);
  outline-offset:2px;
}

/* ---------- Subtle motion: the page should feel alive ---------- */
@keyframes aerisGlow{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:1;transform:scale(1.025)}
}
.hero .aerisBadge{animation:aerisGlow 5s ease-in-out infinite}
.card:nth-child(2),.evidenceCard:nth-child(2){transition-delay:.03s}
.card:nth-child(3),.evidenceCard:nth-child(3){transition-delay:.06s}
.card:nth-child(4){transition-delay:.09s}

/* ---------- Mobile: protect text, spacing and touch targets ---------- */
@media(max-width:680px){
  body:after{background-size:28px 28px;opacity:.18}
  .hero{
    min-height:94svh;
    background-position:58% center;
  }
  .hero:before{
    background:
      linear-gradient(90deg,rgba(4,17,27,.82),rgba(4,17,27,.36)),
      linear-gradient(180deg,rgba(4,17,27,.22),rgba(4,17,27,.93));
  }
  .heroInner{padding-top:118px;padding-bottom:105px}
  .hero h1{
    font-size:clamp(2.7rem,12vw,4.8rem);
    line-height:.94;
    max-width:100%;
  }
  .hero p{max-width:100%;font-size:.95rem}
  .heroLogo{width:88px;height:88px}
  .problemFlow span{backdrop-filter:blur(8px)}
  section:before{width:calc(100% - 28px)}
  .card,.evidenceCard{border-radius:20px}
  .card:hover,.evidenceCard:hover{transform:translateY(-3px)}
  .photo,.dark,.missionMap,.guardianCard,.evidenceHero{border-radius:21px}
  .evidenceHero{padding:22px}
  .evidenceStats div{padding:12px}
  .pathway{padding:18px}
  .question{box-shadow:0 14px 35px rgba(0,0,0,.18)}
  .option{min-height:52px}
  .aiMsg{font-size:.9rem}
}
@media(max-width:390px){
  .heroInner{padding-top:108px}
  .hero h1{font-size:2.62rem}
  .heroLogo{width:78px;height:78px}
  .aerisBadge{font-size:.63rem}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .hero .aerisBadge{animation:none!important}
  .card,.evidenceCard,.gallery figure,.legacyGrid.v43-legacyGrid .legacyBtn{
    transition:none!important;
  }
}