/* =========================================================================
   Plataformas — interactive home section
   Central animated phone + 4 platform cards (2 left / 2 right)
   Uses Colégio Geração design tokens from styles.css
   ========================================================================= */

.plataformas {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(5, 196, 100, 0.06), transparent 70%),
    var(--bg);
}

.plataformas-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 84, 79, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 84, 79, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, black 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, black 0%, transparent 78%);
}

.plataformas .container { position: relative; z-index: 1; }

/* ── Header ──────────────────────────────────────────────────────────── */
.plat-home-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.plat-home-head .eyebrow { justify-content: center; }
.plat-home-head h2 {
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
}
.plat-home-head h2 em {
  font-style: italic;
  font-weight: 300;
  font-family: "Newsreader", serif;
  color: var(--green-teal);
}
.plat-home-head p {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--fg-2);
  max-width: 56ch;
  line-height: 1.6;
}

/* ── Stage grid: features | phone | features ─────────────────────────── */
.plat-stage {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
}

.plat-col {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
}
.plat-col--left { align-items: flex-end; text-align: right; }
.plat-col--right { align-items: flex-start; text-align: left; }

/* ── Feature card ────────────────────────────────────────────────────── */
.plat-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 300px;
  background: none;
  border: 1.5px solid transparent;
  padding: 16px;
  margin: -16px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  border-radius: 18px;
  transition: background 0.32s var(--ease), transform 0.32s var(--ease),
    border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.plat-col--left .plat-feat { align-items: flex-end; }
.plat-col--right .plat-feat { align-items: flex-start; }

/* ── State: HOVER (not selected) — evident preview ───────────────────── */
.plat-feat:not(.is-active):hover {
  transform: translateY(-6px);
  background: color-mix(in oklab, var(--feat-c) 6%, var(--bg));
  border-color: color-mix(in oklab, var(--feat-c) 30%, transparent);
  box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--feat-c) 60%, transparent);
}
.plat-feat:not(.is-active):hover .plat-feat-title { color: var(--feat-c); }
.plat-feat:not(.is-active):hover .plat-feat-desc { color: var(--fg-2); }
.plat-feat:not(.is-active):hover .plat-feat-badge-disc {
  transform: scale(1.1);
  box-shadow: 0 16px 32px -8px color-mix(in oklab, var(--feat-c) 78%, transparent);
}
.plat-feat:not(.is-active):hover .plat-feat-badge-rays { opacity: 0.68; }

/* ── State: SELECTED — strongest, defined ────────────────────────────── */
.plat-feat.is-active {
  background: color-mix(in oklab, var(--feat-c) 14%, var(--bg));
  border: 2px solid color-mix(in oklab, var(--feat-c) 52%, transparent);
  box-shadow: 0 18px 38px -16px color-mix(in oklab, var(--feat-c) 55%, transparent);
}
.plat-feat.is-active .plat-feat-title { color: var(--feat-c); font-weight: 700; }
.plat-feat.is-active:hover { transform: translateY(-3px); }
/* "Ativo" indicator — only on the selected card */
.plat-feat-flag {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--feat-c);
}
.plat-feat-flag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--feat-c);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--feat-c) 22%, transparent);
}
.plat-feat.is-active .plat-feat-flag { display: inline-flex; }

/* Badge — circular icon with radiating dash arc */
.plat-feat-badge {
  position: relative;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
}
.plat-feat-badge-disc {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--feat-c);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--feat-c) 60%, transparent);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  z-index: 2;
}
.plat-feat.is-active .plat-feat-badge-disc {
  transform: scale(1.08);
  box-shadow: 0 14px 30px -8px color-mix(in oklab, var(--feat-c) 70%, transparent);
}
/* Radiating dashes — drawn with conic-gradient ring */
.plat-feat-badge-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--feat-c) 0deg 3.2deg,
      transparent 3.2deg 11.25deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 38px, #000 39px 100%);
  mask: radial-gradient(circle, transparent 0 38px, #000 39px 100%);
  opacity: 0.42;
  transform: rotate(0deg);
  transition: opacity 0.45s var(--ease);
}
.plat-feat.is-active .plat-feat-badge-rays {
  opacity: 0.9;
  animation: rayspin 16s linear infinite;
}
@keyframes rayspin { to { transform: rotate(360deg); } }

/* Progress ring (active = auto-advance timer) */
.plat-feat-ring {
  position: absolute;
  inset: 4px;
  z-index: 3;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
}
.plat-feat.is-active .plat-feat-ring { opacity: 1; }
.plat-feat-ring circle {
  fill: none;
  stroke: var(--feat-c);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.plat-feat-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--feat-c);
  font-weight: 500;
}
.plat-feat-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.plat-col--left .plat-feat-text { align-items: flex-end; }
.plat-feat-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--fg);
}
.plat-feat-desc {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 28ch;
  transition: color 0.3s;
}
.plat-feat.is-active .plat-feat-desc { color: var(--fg-2); }

/* ── Phone ───────────────────────────────────────────────────────────── */
.plat-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.plat-phone-glow {
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--feat-c) 45%, transparent), transparent 65%);
  filter: blur(54px);
  z-index: 0;
  transition: background 0.6s var(--ease);
  animation: platpulse 6s ease-in-out infinite;
}
@keyframes platpulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

.plat-phone {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 19;
  background: #14201d;
  border-radius: 42px;
  padding: 11px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 40px 80px -30px rgba(14, 84, 79, 0.5),
    0 0 0 2px rgba(20, 32, 29, 0.6);
  animation: platfloat 7s ease-in-out infinite;
}
@keyframes platfloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.plat-phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #14201d;
  border-radius: 16px;
  z-index: 6;
}

.plat-screen {
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--scr-bg, #fafaf7);
  transition: background 0.6s var(--ease);
  display: flex;
  flex-direction: column;
}

/* Screen header */
.plat-scr-head {
  padding: 52px 18px 16px;
  background: linear-gradient(150deg, var(--feat-c) 0%, color-mix(in oklab, var(--feat-c) 62%, #06302c) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.plat-scr-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,0.05) 16px 17px);
  pointer-events: none;
}
.plat-scr-app {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
  position: relative;
  z-index: 1;
}
.plat-scr-app-ic {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
}
.plat-scr-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.02em;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
.plat-scr-sub {
  font-size: 12px;
  opacity: 0.82;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

/* Screen body */
.plat-scr-body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Screen content is always visible. The "motion" is the app-to-app cycling
   (driven by React state), plus self-contained decorative loops below.
   Entrance keyframes are intentionally avoided here because they gate
   visibility and can freeze on re-render. */
.plat-screen { opacity: 1; }
.plat-scr-body > * { opacity: 1; }

/* generic card inside screen */
.scr-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 13px;
}

/* ClipEscola — feed */
.scr-feed-item { display: flex; align-items: flex-start; gap: 10px; }
.scr-feed-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--feat-c); flex-shrink: 0; margin-top: 4px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--feat-c) 18%, transparent);
}
.scr-feed-title {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: var(--fg);
  line-height: 1.25;
}
.scr-feed-meta { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.scr-feed-time {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  flex-shrink: 0;
}
.scr-typing {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--feat-c); font-weight: 600;
}
.scr-typing-dots { display: inline-flex; gap: 3px; }
.scr-typing-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--feat-c);
  animation: typedot 1.2s ease-in-out infinite;
}
.scr-typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.scr-typing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typedot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Gennera — boletim */
.scr-grades-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.scr-grade-bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; margin-top: 10px; }
.scr-grade-bars span {
  flex: 1; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--feat-c), color-mix(in oklab, var(--feat-c) 55%, #fff));
  transform-origin: bottom;
}
.scr-grade-foot {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px;
}
.scr-grade-avg {
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--fg);
  letter-spacing: -0.02em;
}
.scr-grade-avg small { font-size: 10px; color: var(--muted); font-weight: 400; margin-right: 4px; }
.scr-stat-row { display: flex; gap: 9px; }
.scr-stat {
  flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
}
.scr-stat-val { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--feat-c); letter-spacing: -0.02em; }
.scr-stat-lab { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* Classroom — tasks */
.scr-task { display: flex; align-items: center; gap: 10px; }
.scr-task-check {
  width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
  border: 1.8px solid color-mix(in oklab, var(--feat-c) 45%, var(--line));
  display: grid; place-items: center; color: #fff; transition: all 0.3s var(--ease);
}
.scr-task.done .scr-task-check { background: var(--feat-c); border-color: var(--feat-c); }
.scr-task-title { font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; color: var(--fg); line-height: 1.2; }
.scr-task.done .scr-task-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent); }
.scr-task-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.scr-task-tag {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em;
  background: color-mix(in oklab, var(--feat-c) 12%, transparent); color: var(--feat-c);
  padding: 3px 7px; border-radius: 999px;
}

/* Positivo On — content */
.scr-content-card { display: flex; flex-direction: column; gap: 8px; }
.scr-content-top { display: flex; align-items: center; gap: 9px; }
.scr-content-thumb {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--feat-c), color-mix(in oklab, var(--feat-c) 55%, #fff));
  display: grid; place-items: center; color: #fff;
}
.scr-content-tag { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--feat-c); }
.scr-content-title { font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; color: var(--fg); line-height: 1.2; margin-top: 1px; }
.scr-content-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.scr-content-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--feat-c), color-mix(in oklab, var(--feat-c) 60%, #2eda82));
}
.scr-content-foot { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); }

/* Phone dock dots */
.plat-phone-dock {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 12px 0 14px;
  background: var(--scr-bg, #fafaf7);
  transition: background 0.6s var(--ease);
}
.plat-phone-dock i {
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in oklab, var(--feat-c) 28%, var(--line));
  transition: all 0.4s var(--ease);
}
.plat-phone-dock i.on { width: 22px; border-radius: 4px; background: var(--feat-c); }

/* ── Mobile dock (shown < 920px instead of side columns) ─────────────── */
.plat-mobile-tabs { display: none; }

/* ── Footer note ─────────────────────────────────────────────────────── */
.plat-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .plat-stage {
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: center;
  }
  .plat-side { display: none; }
  .plat-phone-wrap {
    order: -1;
    width: 100%;
    max-width: 320px;
  }

  /* Mobile tab selector */
  .plat-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 520px;
  }
  .plat-feat {
    max-width: none;
    width: 100%;
    align-items: flex-start !important;
    text-align: left;
    flex-direction: row;
    gap: 14px;
    border: 1px solid var(--line);
    margin: 0;
    padding: 14px;
    background: var(--bg);
  }
  .plat-feat.is-active {
    border-color: var(--feat-c);
    background: color-mix(in oklab, var(--feat-c) 8%, var(--bg));
  }
  .plat-feat-badge { width: 52px; height: 52px; }
  .plat-feat-badge-disc { inset: 6px; }
  .plat-feat-badge-rays { -webkit-mask: radial-gradient(circle, transparent 0 25px, #000 26px 100%); mask: radial-gradient(circle, transparent 0 25px, #000 26px 100%); }
  .plat-feat-ring { display: none; }
  .plat-feat-text { display: flex; flex-direction: column; gap: 4px; }
  .plat-feat-title { font-size: 16px; }
  .plat-feat-desc { display: none; }
}

@media (max-width: 540px) {
  .plat-mobile-tabs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .plat-phone, .plat-phone-glow, .plat-feat-badge-rays,
  .scr-typing-dots i { animation: none !important; }
  .plat-scr-anim > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}