/* =====================================================================
   Cards de idioma com uma bandeira que ondula e preenche o card (lc-). Arrastam para o lado como os destinos do intercâmbio.
   Usado em cursos-ao-vivo.html e preparatorios.html. Ver /js/lang-cards.js.
   ===================================================================== */
.lc{ position:relative; }
.lc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.lc-title{ font-family:"Poppins", Arial, sans-serif; font-size:24px; font-weight:800; line-height:1.2; color:var(--navy); margin:0; max-width:24ch; }
.lc-arrows{ display:flex; gap:10px; flex:none; }
.lc-arrow{
  width:46px; height:46px; border-radius:50%; border:1.5px solid #D5DBEA; background:#fff; color:var(--navy);
  display:grid; place-items:center; cursor:pointer; padding:0; transition:background .15s, color .15s, border-color .15s;
}
.lc-arrow svg{ width:20px; height:20px; }
.lc-arrow:hover:not(:disabled){ background:var(--navy); color:#fff; border-color:var(--navy); }
.lc-arrow:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.lc-arrow:disabled{ opacity:.35; cursor:default; }

.lc-track{
  display:flex; gap:18px; overflow-x:auto; margin:-14px -6px 0; padding:14px 6px 26px; scroll-snap-type:x mandatory;
  scroll-padding-left:6px; -webkit-overflow-scrolling:touch; cursor:grab; scrollbar-width:thin;
}
.lc-track.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.lc-track.dragging .lc-card{ pointer-events:none; }

.lc-card{
  position:relative; flex:none; width:236px; height:320px; border-radius:24px; overflow:hidden; color:#fff; background:#0B1830;
  border:0; padding:0; font:inherit; text-align:left; cursor:pointer; scroll-snap-align:start;
  box-shadow:0 18px 34px -24px rgba(6,17,36,.6); transition:transform .28s ease, box-shadow .28s ease;
}
.lc-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(6,17,36,.18) 0%, rgba(6,17,36,0) 30%, rgba(6,17,36,.5) 62%, rgba(6,17,36,.88) 100%);
}
.lc-card:hover{ transform:translateY(-6px); box-shadow:0 30px 48px -26px rgba(6,17,36,.7); }
.lc-card:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.lc-tag{ position:absolute; top:14px; left:14px; z-index:3; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--navy); display:grid; place-items:center; box-shadow:0 6px 14px -6px rgba(0,0,0,.5); }
.lc-tag svg{ width:19px; height:19px; }
.lc-check{
  position:absolute; top:14px; right:14px; z-index:3; width:32px; height:32px; border-radius:50%; background:var(--green); color:#fff;
  display:grid; place-items:center; transform:scale(.4); opacity:0; transition:transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s ease;
}
.lc-check svg{ width:18px; height:18px; }
.lc-label{ position:absolute; left:20px; right:20px; bottom:20px; z-index:3; }
.lc-name{ display:block; font-family:"Poppins", Arial, sans-serif; font-size:29px; font-weight:800; line-height:1.05; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.lc-name.long{ font-size:24px; }
.lc-sub{ display:block; margin-top:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.86); }

.lc-card[aria-selected="true"]{ box-shadow:0 0 0 3px var(--green), 0 30px 48px -24px rgba(6,17,36,.75); transform:translateY(-6px); }
.lc-card[aria-selected="true"] .lc-check{ transform:scale(1); opacity:1; }

/* ---------- cena de bandeiras que ondulam ---------- */
.lc-scene{
  position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(90% 60% at 50% 0%, rgba(255,255,255,.16), transparent 65%), linear-gradient(160deg, var(--c1), var(--c2));
}
.lc-fl{ position:absolute; display:block; --amp:6px; }
/* a bandeira única ocupa o card inteiro (um pouco maior que ele, para a onda não deixar vãos nas bordas) */
.lc-fl.solo{ left:0; right:0; top:-12px; bottom:-12px; }
.lc-cloth{ display:flex; width:100%; height:100%; }
.lc-cloth{ background:#000; }
.lc-cloth i{
  flex:1 1 0; display:block; background-repeat:no-repeat; background-size:1400% 100%; margin-right:-1px; padding-right:1px; background-origin:border-box;
  animation:lc-wv 2.6s ease-in-out infinite, lc-sh 2.6s ease-in-out infinite; animation-delay:calc(var(--k) * -.17s);
}
@keyframes lc-wv{ 0%,100%{ transform:translateY(0); } 25%{ transform:translateY(calc(var(--amp) * -1)); } 75%{ transform:translateY(var(--amp)); } }
@keyframes lc-sh{ 0%,100%{ filter:brightness(1); } 25%{ filter:brightness(1.08); } 75%{ filter:brightness(.88); } }

/* variante escura e maior (preparatórios) */
.lc.lc--dark .lc-title{ color:#fff; }
.lc.lc--dark .lc-arrow{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.lc.lc--dark .lc-arrow:hover:not(:disabled){ background:var(--green); border-color:var(--green); color:#fff; }
.lc.lc--big .lc-card{ width:270px; height:360px; }
.lc.lc--big .lc-name{ font-size:32px; }

@media (max-width:700px){
  .lc-title{ font-size:19px; }
  .lc-arrow{ width:40px; height:40px; }
  .lc-card{ width:196px; height:270px; border-radius:20px; }
  .lc.lc--big .lc-card{ width:214px; height:300px; }
  .lc-name{ font-size:24px; }
  .lc-name.long{ font-size:20px; }
  .lc.lc--big .lc-name{ font-size:26px; }
}
@media (prefers-reduced-motion: reduce){
  .lc-card, .lc-check, .lc-fl{ transition:none; }
  .lc-cloth i{ animation:none; }
}