/* ============================================================
   Lingo Academy — Home (/my/) impactante e update-safe
   Carregado via additionalhtmlhead (NAO toca templates do core).
   Escopo 100% em body.pagelayout-mydashboard.
   Marca: navy #1E3A5C, vermelho #D9342B, teal #2CB1BF, ambar #F2A900
   ============================================================ */

/* ---- Variaveis da marca ---- */
body.pagelayout-mydashboard {
  --lingo-navy: #1E3A5C;
  --lingo-navy-d: #142A45;
  --lingo-red:  #D9342B;
  --lingo-blue: #2477D4;   /* azul da Cami / logo (era teal) */
  --lingo-amber:#F2A900;
  --lingo-radius: 22px;
}

/* ============================================================
   1) LARGURA ADAPTAVEL — solta a trava central "limitedwidth"
   ============================================================ */
body.pagelayout-mydashboard.limitedwidth #page.drawers .main-inner,
body.pagelayout-mydashboard #page #region-main .main-inner {
  max-width: 1360px;          /* era ~830-1120px; agora respira */
  margin-inline: auto;
}
/* o hero e a faixa de avisos ocupam toda a largura do container */
body.pagelayout-mydashboard #region-main > .main-inner { position: relative; }

/* ============================================================
   2) FAIXA DE AVISOS (banner dismissivel no topo)
   ============================================================ */
.lingo-announce {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem;
  padding: .7rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(217,52,43,.10), rgba(242,169,0,.12));
  border: 1px solid rgba(217,52,43,.25);
  color: var(--lingo-navy);
  font-weight: 500;
  animation: lingo-fade .5s ease both;
}
.lingo-announce .lingo-announce__tag {
  flex: 0 0 auto;
  background: var(--lingo-red); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: .18rem .55rem; border-radius: 999px;
}
.lingo-announce a { color: var(--lingo-red); font-weight: 700; text-decoration: underline; }
.lingo-announce__close {
  margin-left: auto; flex: 0 0 auto;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--lingo-navy); opacity: .55;
}
.lingo-announce__close:hover { opacity: 1; }

/* ============================================================
   3) HERO
   ============================================================ */
.lingo-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--lingo-radius);
  padding: clamp(1.4rem, 3.2vw, 2.6rem) clamp(1.4rem, 3.5vw, 3rem);
  min-height: clamp(210px, 32vh, 320px);
  display: flex; align-items: center;
  color: #fff;
  /* scrim navy garante contraste do texto a esquerda + revela os objetos 3D a direita */
  background:
    linear-gradient(90deg, rgba(20,42,69,.94) 0%, rgba(20,42,69,.80) 32%, rgba(20,42,69,.32) 58%, rgba(20,42,69,.04) 80%),
    url('/lingocustom/hero-bg.jpg') center right / cover no-repeat,
    var(--lingo-navy-d);
  box-shadow: 0 18px 40px -18px rgba(20,42,69,.55);
  animation: lingo-rise .6s cubic-bezier(.2,.7,.2,1) both;
}

/* camada de conteudo acima dos elementos flutuantes */
.lingo-hero__content { position: relative; z-index: 3; max-width: 640px; }
.lingo-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #cfe3ff; opacity: .9; margin-bottom: .7rem;
}
.lingo-hero__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lingo-amber); box-shadow: 0 0 0 4px rgba(242,169,0,.25);
}
.lingo-hero h1 {
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  font-weight: 800; line-height: 1.1; margin: 0 0 .55rem; color: #fff;
}
.lingo-hero h1 .lingo-hero__name { color: var(--lingo-amber); }
.lingo-hero__sub {
  font-size: clamp(.98rem, 1.35vw, 1.14rem);
  color: #dceafd; opacity: .92; margin: 0 0 1.3rem; line-height: 1.5;
}

/* botoes */
.lingo-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.lingo-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.35rem; border-radius: 999px;
  font-weight: 700; font-size: .98rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer; border: 2px solid transparent;
}
.lingo-btn--primary { background: #fff; color: var(--lingo-navy); box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.lingo-btn--primary:hover { transform: translateY(-2px); color: var(--lingo-red); text-decoration: none; }
.lingo-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }
.lingo-btn--ghost:hover { background: rgba(255,255,255,.16); color: #fff; transform: translateY(-2px); text-decoration: none; }
.lingo-btn__arrow { transition: transform .2s ease; }
.lingo-btn:hover .lingo-btn__arrow { transform: translateX(3px); }

/* chips de estatistica */
.lingo-hero__stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.lingo-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  padding: .4rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #eaf3ff;
  backdrop-filter: blur(4px);
}

/* ---- decor CSS desligado: os objetos 3D agora vem da imagem de fundo ---- */
.lingo-hero__decor { display: none !important; }
.lingo-hero__decor--legacy { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lingo-blob { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .5; will-change: transform; }
.lingo-blob--1 { width: 150px; height: 150px; top: -30px; right: 12%;  background: radial-gradient(circle at 30% 30%, var(--lingo-blue), transparent 70%);  animation: lingo-float 9s ease-in-out infinite; }
.lingo-blob--2 { width: 110px; height: 110px; bottom: -25px; right: 30%; background: radial-gradient(circle at 30% 30%, var(--lingo-amber), transparent 70%); animation: lingo-float 11s ease-in-out infinite reverse; }
.lingo-blob--3 { width: 90px;  height: 90px;  top: 40%; right: 4%;      background: radial-gradient(circle at 30% 30%, var(--lingo-red), transparent 70%);   animation: lingo-float 7s  ease-in-out infinite; }

/* pilulas flutuantes (palavras/idiomas) — a "gramatica colorida" da marca */
.lingo-float-pill {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,.95); color: var(--lingo-navy);
  font-weight: 700; font-size: .82rem; padding: .32rem .7rem; border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); white-space: nowrap;
  will-change: transform;
}
.lingo-float-pill.p1 { top: 16%;  right: 8%;  animation: lingo-float 6.5s ease-in-out infinite; }
.lingo-float-pill.p2 { top: 54%;  right: 22%; animation: lingo-float 8.5s ease-in-out infinite reverse; }
.lingo-float-pill.p3 { bottom: 14%; right: 6%; animation: lingo-float 7.5s ease-in-out infinite; }
.lingo-float-pill .en { color: var(--lingo-blue); }
.lingo-float-pill .ar { color: var(--lingo-red); }

/* mascote Cami — video em moldura circular, sobre o glow da imagem */
.lingo-hero__mascot {
  position: absolute; z-index: 2;
  right: clamp(14%, 20%, 26%); top: 50%; transform: translateY(-50%);
  width: clamp(120px, 15vw, 180px); height: clamp(120px, 15vw, 180px);
  border-radius: 50%; object-fit: cover; background: #0e1f33;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.55);
  pointer-events: none;
  animation: lingo-bob 5s ease-in-out infinite;
}

/* ============================================================
   4) ATALHOS DE TRILHA (chips abaixo do hero)
   ============================================================ */
.lingo-tracks { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .2rem; }
.lingo-track {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 14px; text-decoration: none;
  font-weight: 600; color: var(--lingo-navy);
  background: #fff; border: 1px solid rgba(30,58,92,.14);
  box-shadow: 0 6px 16px -12px rgba(30,58,92,.5);
  transition: transform .15s ease, border-color .2s ease;
}
.lingo-track:hover { transform: translateY(-2px); border-color: var(--lingo-red); color: var(--lingo-navy); text-decoration: none; }
.lingo-track__dot { width: 10px; height: 10px; border-radius: 50%; }

/* ============================================================
   5) ANIMACOES
   ============================================================ */
@keyframes lingo-float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-16px) translateX(6px); } }
@keyframes lingo-bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lingo-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lingo-fade  { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   6) RESPONSIVO (mobile-first friendly)
   ============================================================ */
@media (max-width: 768px) {
  .lingo-hero { padding: 1.3rem 1.25rem; }
  .lingo-hero__content { max-width: 100%; }
  .lingo-hero__mascot { width: 92px; height: 92px; opacity: .95; right: 5%; }
  .lingo-float-pill.p2, .lingo-blob--2 { display: none; }   /* menos ruido no mobile */
  .lingo-hero__cta { width: 100%; }
  .lingo-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
  .lingo-float-pill, .lingo-hero__mascot { display: none; }  /* foco total no texto+CTA */
}

/* Acessibilidade: respeita quem desativou animacoes */
@media (prefers-reduced-motion: reduce) {
  .lingo-hero, .lingo-announce,
  .lingo-blob, .lingo-float-pill, .lingo-hero__mascot { animation: none !important; }
}