/*
 * Approved Chi siamo body, extracted from app-staging/ui/assets/app.css.
 * Load after kidz.css and legacy-skin.css. The wrapper must be independent
 * of .course-single-left-sidebar so the legacy section !important rules
 * cannot change the approved spacing. Header and footer are not targeted.
 */
#ic-about-approved {
  --ink: #0b2431;
  --ink-2: #123746;
  --ink-3: #1b4f63;
  --paper: #f4f8f8;
  --white: #ffffff;
  --muted: #536b76;
  --line: #d7e3e7;
  --orange: #ff9800;
  --orange-dark: #d96f00;
  --cyan: #31c0b3;
  --red: #ff3145;
  --purple: #9b3cc1;
  --green: #0aab72;
  --whatsapp: #25d366;
  --whatsapp-dark: #128c7e;
  --yellow: #ffd740;
  --shadow: 0 18px 55px rgba(6, 35, 48, .12);
  --radius: 22px;
  --radius-sm: 14px;
  --content: 1180px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  /* Restore the defaults of the approved page instead of the legacy body. */
  font-weight: 400;
  -webkit-font-smoothing: auto;
}

#ic-about-approved,
#ic-about-approved *,
#ic-about-approved *::before,
#ic-about-approved *::after { box-sizing: border-box; }

/* Scoped compatibility resets: the test page does not load Bootstrap/kidz. */
#ic-about-approved h1,
#ic-about-approved h2,
#ic-about-approved h3 { color: inherit; font-family: inherit; font-weight: bold; }
#ic-about-approved p { color: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; }
#ic-about-approved .lead { font-weight: 400; }
#ic-about-approved .container { max-width: none; padding: 0; }
#ic-about-approved a,
#ic-about-approved a:hover { color: inherit; text-decoration: none; }

/* Approved base layout and typography, in the original cascade order. */
#ic-about-approved .container { width: min(var(--content), calc(100% - 2rem)); margin-inline: auto; }
#ic-about-approved .section { padding: 4.5rem 0; }
#ic-about-approved .section.compact { padding: 2.75rem 0; }
#ic-about-approved .section-white { background: var(--white); }
#ic-about-approved .eyebrow { margin: 0 0 .65rem; color: #a95000; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; font-size: .77rem; }
#ic-about-approved .eyebrow.cyan { color: #087b72; }
#ic-about-approved .eyebrow.purple { color: #78309a; }
#ic-about-approved .page-hero .eyebrow { color: #ffb13b; }
#ic-about-approved .page-hero .eyebrow.cyan { color: #62ddd2; }
#ic-about-approved .page-hero .eyebrow.purple { color: #e4a0f5; }
#ic-about-approved h1,
#ic-about-approved h2,
#ic-about-approved h3 { margin: 0; line-height: 1.08; letter-spacing: -.035em; }
#ic-about-approved h1 { font-size: clamp(2.2rem, 8vw, 4.65rem); }
#ic-about-approved h2 { font-size: clamp(1.75rem, 5vw, 3rem); }
#ic-about-approved h3 { font-size: clamp(1.15rem, 3vw, 1.55rem); }
#ic-about-approved p { margin: .75rem 0 0; }
#ic-about-approved .lead { max-width: 760px; font-size: clamp(1.05rem, 2.2vw, 1.32rem); color: #d9e8ed; }

/* Approved informational-page components. */
#ic-about-approved .content-hero .lead { max-width: 860px; }
#ic-about-approved .content-stats-header { margin-bottom: 1.2rem; }
#ic-about-approved .content-stats-header h2 { margin: 0; max-width: 760px; }
#ic-about-approved .content-stat-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
#ic-about-approved .content-stat { min-height: 126px; display: grid; align-content: center; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
#ic-about-approved .content-stat strong { display: block; color: var(--ink); font-size: clamp(1.7rem, 4vw, 2.45rem); line-height: 1; }
#ic-about-approved .content-stat span { display: block; margin-top: .55rem; color: var(--muted); font-weight: 750; }
#ic-about-approved .content-stack { display: grid; gap: 1.15rem; }
#ic-about-approved .content-block { padding: clamp(1.35rem, 4vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 10px 32px rgba(6,35,48,.055); }
#ic-about-approved .content-block-orange { border-top: 6px solid var(--orange); }
#ic-about-approved .content-block-cyan { border-top: 6px solid var(--cyan); }
#ic-about-approved .content-block-purple { border-top: 6px solid var(--purple); }
#ic-about-approved .content-block-red { border-top: 6px solid var(--red); }
#ic-about-approved .content-block > h2 { max-width: 900px; }
#ic-about-approved .content-block > p:not(.eyebrow) { max-width: 960px; color: var(--muted); }
#ic-about-approved .content-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; }
#ic-about-approved .content-list li { position: relative; padding-left: 1.65rem; color: var(--ink-2); }
#ic-about-approved .content-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 900; }
#ic-about-approved .content-block[id] { scroll-margin-top: 110px; }

/* These declarations follow the content components in the approved source. */
#ic-about-approved .page-hero { background: var(--ink); color: var(--white); padding: 3.4rem 0 3rem; }
#ic-about-approved .page-hero p { color: #c8d9df; max-width: 740px; }
#ic-about-approved .breadcrumbs { margin-bottom: 1rem; color: #acc2cb; font-size: .88rem; }
#ic-about-approved a:focus-visible { outline: 3px solid rgba(49,192,179,.34); outline-offset: 2px; }

@media (max-width: 699px) {
  #ic-about-approved .section { padding: 3rem 0; }
  #ic-about-approved .page-hero { padding: 2.5rem 0 2.2rem; }
}

@media (max-width: 480px) {
  #ic-about-approved .container { width: min(var(--content), calc(100% - 1.25rem)); }
}

/* The approved accessibility override also suppresses legacy transitions. */
@media (prefers-reduced-motion: reduce) {
  #ic-about-approved,
  #ic-about-approved *,
  #ic-about-approved *::before,
  #ic-about-approved *::after { scroll-behavior: auto !important; transition: none !important; }
}