/* ==========================================================================
   VEM DA ESCOLA — PÁGINAS INTERNAS
   Componentes compartilhados por Educadores, Famílias, Conteúdos, Sobre,
   Contato e Biblioteca Escolar. Traduzem para as páginas internas a
   linguagem da página inicial: tipografia expressiva, formas orgânicas,
   ícones lineares e composição editorial.
   A página inicial não carrega este arquivo.
   ========================================================================== */

.page-inner {
  --ip-beige: #e9d2c0;
  --ip-peach: #fdc3a9;
  --ip-peach-soft: #fdeee5;
  --ip-blue: #a1b6c1;
  --ip-blue-pale: #dbe8ee;
  --ip-yellow: #fed8aa;
  --ip-board: #1f4a3c;
  --ip-wood: #9a6a45;
  --ip-line: #dcd6cd;
  --ip-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C40 1 100 1 148 7' fill='none' stroke='%23dd5024' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-inner main {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   1. Tipografia editorial
   -------------------------------------------------------------------------- */
.ip-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-body);
  margin-bottom: var(--spacing-3);
}

.ip-kicker::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-terracotta);
}

.ip-title {
  font-family: var(--font-family-display);
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-5);
}

.ip-h2 {
  font-family: var(--font-family-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-4);
}

.ip-h3 {
  font-family: var(--font-family-sans);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-2);
}

.hl {
  color: var(--color-terracotta);
}

.hl-stroke {
  position: relative;
  display: inline-block;
  color: var(--color-terracotta);
}

.hl-stroke::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -3%;
  bottom: -0.16em;
  height: 0.2em;
  background: var(--ip-underline) no-repeat center / 100% 100%;
}

.ip-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  color: var(--color-navy);
  max-width: 34em;
}

.ip-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-body);
}

.ip-text + .ip-text {
  margin-top: var(--spacing-4);
}

.ip-text strong {
  color: var(--color-navy);
}

.ip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
}

.ip-actions .btn,
.ip-btn {
  min-height: 46px;
  padding: 11px 26px;
  font-size: 0.95rem;
  white-space: normal;
  text-align: center;
}

.page-inner .btn-secondary {
  border-color: var(--color-navy);
}

.page-inner .btn-outline-terracotta {
  background-color: var(--color-white);
}

.page-inner .btn-outline-terracotta:hover {
  background-color: var(--color-terracotta);
}

.ip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-terracotta-hover);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-fast);
}

.ip-link:hover {
  text-decoration-color: currentColor;
}

.ip-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.ip-link:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   2. Ícones
   -------------------------------------------------------------------------- */
.ip-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--color-navy);
  background-color: var(--ip-blue-pale);
}

.ip-icon svg {
  width: 54%;
  height: 54%;
}

.ip-icon.is-blue { background-color: var(--ip-blue); }
.ip-icon.is-peach { background-color: var(--ip-peach); }
.ip-icon.is-yellow { background-color: var(--ip-yellow); }
.ip-icon.is-beige { background-color: var(--ip-beige); }
.ip-icon.is-lg { width: 84px; height: 84px; }
.ip-icon.is-sm { width: 46px; height: 46px; }

.ip-glyph {
  display: block;
  width: 56px;
  height: 56px;
  color: var(--color-terracotta);
}

.ip-glyph.is-navy {
  color: var(--color-navy);
}

.ip-glyph svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   3. Abertura das páginas
   -------------------------------------------------------------------------- */
.ip-hero {
  position: relative;
  padding: var(--spacing-12) 0 var(--spacing-16);
  background-color: var(--color-canvas);
  overflow: hidden;
}

.ip-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--spacing-12);
}

.ip-hero.is-reversed .ip-hero-art {
  order: -1;
}

.ip-hero-art {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 10 / 9;
  justify-self: center;
}

/* Formas orgânicas da marca */
.blob {
  position: absolute;
  display: block;
}

.blob-navy { background-color: var(--color-navy); }
.blob-orange { background-color: var(--color-terracotta); }
.blob-beige { background-color: var(--ip-beige); }
.blob-blue { background-color: var(--color-blue-soft); }
.blob-peach { background-color: var(--ip-peach); }
.blob-yellow { background-color: var(--ip-yellow); }

.shape-a { border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%; }
.shape-b { border-radius: 40% 60% 62% 38% / 48% 58% 42% 52%; }
.shape-arc { border-radius: 100% 0 0 0 / 100% 0 0 0; }
.shape-pill { border-radius: 999px; }

.ip-rays {
  position: absolute;
  width: 64px;
  height: auto;
  overflow: visible;
}

.ip-leaves {
  position: absolute;
  width: 120px;
  height: auto;
}

/* Fotografia em recorte orgânico */
.ip-photo {
  position: absolute;
  overflow: hidden;
  background-color: var(--ip-beige);
}

.ip-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quadro verde: o motivo central da identidade */
.ip-board {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  color: #f4f1ea;
  background: radial-gradient(120% 120% at 30% 20%, #2a5c4b 0%, var(--ip-board) 60%, #173a2f 100%);
  border: 10px solid var(--ip-wood);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 14px 30px rgba(21, 46, 68, 0.14);
}

.ip-board-text {
  font-family: var(--font-family-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  transform: rotate(-3deg);
}

.ip-board-text::after {
  content: '';
  display: block;
  width: 70%;
  height: 8px;
  margin-top: 8px;
  background: var(--ip-underline) no-repeat left center / 100% 100%;
}

.ip-board-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
}

.ip-board-icons svg {
  width: 46px;
  height: 46px;
}

.ip-board-icons .is-accent {
  color: #f08a4b;
}

/* Moldura de tela para capturas reais da aplicação */
.ip-screen {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(21, 46, 68, 0.16);
}

.ip-screen::before {
  content: '';
  display: block;
  height: 26px;
  background:
    radial-gradient(circle at 16px 13px, #e58a6a 4px, transparent 5px),
    radial-gradient(circle at 32px 13px, #f1c37b 4px, transparent 5px),
    radial-gradient(circle at 48px 13px, #9fc1b0 4px, transparent 5px),
    var(--color-canvas-alt);
  border-bottom: 1px solid var(--color-card-border);
}

.ip-screen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

/* --------------------------------------------------------------------------
   4. Seções
   -------------------------------------------------------------------------- */
.ip-section {
  position: relative;
  padding: var(--spacing-16) 0;
  background-color: var(--color-white);
}

.ip-section.is-canvas { background-color: var(--color-canvas); }
.ip-section.is-tint { background-color: var(--color-canvas-alt); }
.ip-section.is-peach { background-color: var(--ip-peach-soft); }
.ip-section.is-tight { padding: var(--spacing-10) 0; }

.ip-heading {
  max-width: 720px;
  margin-bottom: var(--spacing-10);
}

.ip-heading.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ip-heading .ip-text {
  font-size: 1.05rem;
}

.ip-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-12);
}

.ip-split.is-wide-left {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.ip-split.is-top {
  align-items: start;
}

/* Linhas editoriais numeradas (desafios, etapas, orientações) */
.ip-rows {
  counter-reset: ip-row;
  border-top: 1px solid var(--ip-line);
}

.ip-row {
  counter-increment: ip-row;
  display: grid;
  grid-template-columns: 96px minmax(0, 0.9fr) minmax(0, 1.3fr);
  align-items: start;
  gap: var(--spacing-6);
  padding: var(--spacing-8) 0;
  border-bottom: 1px solid var(--ip-line);
}

.ip-row::before {
  content: counter(ip-row, decimal-leading-zero);
  font-family: var(--font-family-display);
  font-size: 3.2rem;
  font-weight: var(--font-weight-extrabold);
  line-height: 0.9;
  color: var(--color-terracotta);
}

.ip-row:nth-child(even)::before {
  color: var(--color-blue-soft);
}

.ip-row .ip-h3 {
  font-size: 1.35rem;
  margin: 0;
}

/* Colunas com separadores verticais, como os indicadores da home */
.ip-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ip-column {
  padding: var(--spacing-2) var(--spacing-8);
  border-left: 1px solid var(--ip-line);
}

.ip-column:first-child {
  border-left: none;
  padding-left: 0;
}

.ip-column:last-child {
  padding-right: 0;
}

.ip-column .ip-glyph,
.ip-column .ip-icon {
  margin-bottom: var(--spacing-4);
}

.ip-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terracotta-hover);
  margin-bottom: 6px;
}

/* Blocos suaves com canto orgânico */
.ip-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-5);
}

.ip-tiles.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ip-tiles.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ip-tiles.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ip-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  background-color: var(--color-canvas);
  border-radius: 28px 28px 28px 8px;
}

.ip-section.is-canvas .ip-tile,
.ip-section.is-tint .ip-tile,
.ip-section.is-peach .ip-tile {
  background-color: var(--color-white);
}

.ip-tile .ip-h3 {
  margin: 0;
}

.ip-tile .ip-text {
  font-size: 0.95rem;
  line-height: 1.55;
}

.ip-tile .ip-link {
  margin-top: auto;
}

/* Lista com marcadores de confirmação */
.ip-checks {
  display: grid;
  gap: var(--spacing-3);
}

.ip-checks.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-8);
}

.ip-checks li {
  position: relative;
  padding-left: 34px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-body);
}

.ip-checks li strong {
  display: block;
  color: var(--color-navy);
}

.ip-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ip-peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152e44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.500 10.500 17 18 8'/%3E%3C/svg%3E") no-repeat center / 62%;
}

/* Etapas ligadas por uma linha */
.ip-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-8);
}

.ip-steps::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 30px;
  border-top: 2px dashed var(--ip-line);
}

.ip-step {
  position: relative;
  text-align: center;
}

.ip-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-4);
  border-radius: 50%;
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  background-color: var(--color-navy);
  box-shadow: 0 0 0 8px var(--color-canvas);
}

.ip-step:nth-child(2) .ip-step-number {
  background-color: var(--color-terracotta);
}

.ip-step:nth-child(3) .ip-step-number {
  background-color: var(--color-blue-soft);
}

.ip-section:not(.is-canvas) .ip-step-number {
  box-shadow: 0 0 0 8px var(--color-white);
}

/* Etiquetas de estado */
.ip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--color-navy);
  background-color: var(--ip-blue-pale);
}

.ip-chip.is-available { background-color: #dcefe4; color: #1f5a41; }
.ip-chip.is-soon { background-color: var(--ip-yellow); color: #5c3a06; }
.ip-chip.is-accent { background-color: var(--ip-peach); color: #6a2410; }

/* Aviso de estado */
.ip-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-6);
  background-color: #fff6e6;
  border-left: 4px solid #e0a03c;
  border-radius: 6px 20px 20px 6px;
  color: #4d3508;
}

.ip-note svg {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
}

.ip-note-title {
  font-family: var(--font-family-sans);
  font-size: 1.02rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: #4d3508;
  margin-bottom: 4px;
}

.ip-note p {
  font-size: 0.95rem;
  line-height: 1.55;
}

.ip-note.is-info {
  background-color: var(--color-blue-tint);
  border-left-color: var(--color-blue-soft);
  color: var(--color-navy);
}

.ip-note.is-info .ip-note-title {
  color: var(--color-navy);
}

/* Citação institucional */
.ip-quote {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) 92px;
}

.ip-quote::before {
  content: '“';
  position: absolute;
  left: 0;
  top: -0.12em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-terracotta);
}

.ip-quote p {
  font-family: var(--font-family-display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.ip-quote p::after {
  content: '';
  display: block;
  width: 180px;
  height: 10px;
  margin-top: var(--spacing-4);
  background: var(--ip-underline) no-repeat left center / 100% 100%;
}

.ip-quote cite {
  display: block;
  margin-top: var(--spacing-3);
  font-size: 0.9rem;
  font-style: normal;
  color: var(--color-text-body);
}

/* Faixa de chamada final */
.ip-band {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-12) var(--spacing-12);
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 40px 40px 40px 12px;
}

.ip-band-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.ip-band .ip-h2 {
  color: var(--color-white);
}

.ip-band .ip-text {
  color: #d5e2ee;
  font-size: 1.05rem;
}

.ip-band .ip-kicker {
  color: #f6b592;
}

.ip-band .btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.ip-band .btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.ip-band .blob {
  z-index: 0;
}

/* Navegação entre páginas relacionadas */
.ip-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.ip-related-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  background-color: var(--color-white);
  border-radius: 22px;
  box-shadow: 0 4px 18px rgba(21, 46, 68, 0.06);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ip-related-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ip-related-link > span:not(.ip-icon) {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-body);
}

.ip-related-link strong {
  display: block;
  font-size: 1.05rem;
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   5. Sobre — fundadora e conceito
   -------------------------------------------------------------------------- */
.ip-founder {
  position: relative;
  padding: var(--spacing-10) var(--spacing-8);
  background-color: var(--color-canvas);
  border-radius: 36px 36px 36px 10px;
  overflow: hidden;
}

.ip-founder-name {
  position: relative;
  font-family: var(--font-family-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-2);
}

.ip-founder-role {
  position: relative;
  font-size: 1rem;
  color: var(--color-text-body);
  margin-bottom: var(--spacing-8);
}

.ip-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--ip-line);
}

.ip-stat-value {
  font-family: var(--font-family-display);
  font-size: 2.4rem;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  color: var(--color-terracotta);
  white-space: nowrap;
}

.ip-stat-label {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-navy);
}

.ip-footnote {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: var(--spacing-4);
}

.ip-concept {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-4);
}

.ip-concept .ip-board {
  aspect-ratio: 16 / 10;
}

.ip-concept-arrow {
  width: 100%;
  height: auto;
  color: var(--color-terracotta);
}

.ip-concept-caption {
  display: block;
  margin-top: var(--spacing-3);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   6. Conteúdos
   -------------------------------------------------------------------------- */
.ip-sheets {
  position: absolute;
  inset: 12% 14% 10% 12%;
}

.ip-sheet {
  position: absolute;
  inset: 0;
  padding: var(--spacing-6);
  background-color: var(--color-white);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(21, 46, 68, 0.12);
}

.ip-sheet:nth-child(1) { transform: rotate(-8deg) translate(-6%, 3%); background-color: var(--ip-blue-pale); }
.ip-sheet:nth-child(2) { transform: rotate(5deg) translate(5%, 1%); background-color: var(--ip-peach-soft); }
.ip-sheet:nth-child(3) { transform: rotate(-2deg); }

.ip-sheet-lines {
  display: grid;
  gap: 12px;
  margin-top: var(--spacing-5);
}

.ip-sheet-lines span {
  height: 9px;
  border-radius: 5px;
  background-color: var(--color-canvas-alt);
}

.ip-sheet-lines span:nth-child(1) { width: 78%; height: 16px; background-color: var(--color-navy); }
.ip-sheet-lines span:nth-child(2) { width: 46%; height: 16px; background-color: var(--color-terracotta); margin-bottom: 8px; }
.ip-sheet-lines span:nth-child(4) { width: 92%; }
.ip-sheet-lines span:nth-child(5) { width: 84%; }
.ip-sheet-lines span:nth-child(6) { width: 60%; }

.ip-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-5);
  align-items: start;
}

.ip-status {
  padding: var(--spacing-6);
  background-color: var(--color-white);
  border-radius: 28px 28px 28px 8px;
}

.ip-status .ip-chip {
  margin-bottom: var(--spacing-3);
}

.ip-status-list {
  display: grid;
  margin-top: var(--spacing-3);
}

.ip-status-list li {
  padding: var(--spacing-3) 0;
  border-top: 1px solid var(--ip-line);
}

.ip-status-list strong {
  display: block;
  font-size: 1rem;
  color: var(--color-navy);
}

.ip-status-list span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-body);
}

.ip-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-5);
}

.ip-article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  background-color: var(--color-canvas);
  border-radius: 28px 28px 28px 8px;
}

.ip-article-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.ip-empty {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-8);
  border: 2px dashed var(--ip-line);
  border-radius: 28px;
  background-color: var(--color-canvas);
}

/* --------------------------------------------------------------------------
   7. Contato
   -------------------------------------------------------------------------- */
.ip-bubbles {
  position: absolute;
  inset: 0;
}

.ip-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
}

.ip-bubble svg {
  width: 42%;
  height: 42%;
}

.ip-bubble.is-a { left: 8%; top: 10%; width: 46%; height: 42%; background-color: var(--ip-peach); border-radius: 46% 46% 46% 10% / 50% 50% 50% 14%; }
.ip-bubble.is-b { right: 6%; top: 30%; width: 40%; height: 38%; background-color: var(--ip-blue); border-radius: 46% 46% 10% 46% / 50% 50% 14% 50%; }
.ip-bubble.is-c { left: 24%; bottom: 6%; width: 34%; height: 30%; background-color: var(--ip-yellow); border-radius: 46% 46% 46% 10% / 50% 50% 50% 14%; }

.ip-form {
  padding: var(--spacing-8);
  background-color: var(--color-canvas);
  border-radius: 36px 36px 36px 10px;
}

.ip-form fieldset {
  border: none;
  min-width: 0;
}

.ip-form legend {
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--spacing-5);
  padding: 0;
}

.ip-form .form-label {
  font-size: 0.92rem;
}

.ip-form .form-control {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 1rem;
  border-color: #cfc8bd;
}

.ip-form fieldset:disabled .form-control {
  background-color: var(--color-canvas-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.ip-form fieldset:disabled .form-label {
  color: var(--color-text-muted);
}

.ip-form .btn {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
}

.ip-form .btn:disabled {
  background-color: #cfd5da;
  color: #4a5661;
  box-shadow: none;
  cursor: not-allowed;
}

.ip-form .ip-note {
  margin-bottom: var(--spacing-6);
}

.form-hint {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-3);
}

.form-feedback {
  display: none;
  margin-bottom: var(--spacing-4);
  padding: 14px 18px;
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-feedback.is-visible { display: block; }
.form-feedback.is-success { background-color: var(--color-green-tint); border-color: var(--color-green-accent); color: #1f5a41; }
.form-feedback.is-error { background-color: #fdf2f2; border-color: #f05252; color: #a51919; }
.form-feedback.is-warning { background-color: #fef9e7; border-color: #f59e0b; color: #7a3608; }

.ip-audience {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.ip-audience li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   8. Biblioteca Escolar
   -------------------------------------------------------------------------- */
.ip-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a2410;
  background-color: var(--ip-peach);
}

.ip-product-badge svg {
  width: 16px;
  height: 16px;
}

.ip-hero-art.is-product {
  aspect-ratio: 16 / 12;
  max-width: 640px;
}

.ip-hero-art.is-product .ip-screen {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 12%;
  transform: rotate(-2deg);
}

.ip-free-seal {
  position: absolute;
  right: 0;
  top: 2%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-terracotta);
  transform: rotate(10deg);
  box-shadow: 0 8px 20px rgba(221, 80, 36, 0.3);
}

.ip-free-seal small {
  font-family: var(--font-family-sans);
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.page-inner .features-grid {
  gap: var(--spacing-5);
}

.page-inner .feature-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--spacing-4);
  row-gap: 6px;
  align-items: start;
  padding: var(--spacing-6);
  border: none;
  border-radius: 28px 28px 28px 8px;
}

.page-inner .feature-card .ip-icon {
  grid-row: span 2;
}

.page-inner .feature-card-title {
  font-family: var(--font-family-sans);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin: 0;
  align-self: center;
}

.page-inner .feature-card-desc {
  grid-column: 2;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Galeria de telas */
.ip-gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
}

.page-inner .preview-tab-btn {
  min-height: 44px;
  padding: 9px 18px;
  font-size: 0.92rem;
  background-color: var(--color-white);
  border-color: #cfc8bd;
}

.page-inner .preview-tab-btn.active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

.ip-gallery {
  max-width: 1080px;
  margin: 0 auto;
}

.ip-gallery-frame {
  position: relative;
  max-height: min(72vh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-canvas-alt);
}

.ip-gallery-frame:focus-visible {
  outline-offset: -3px;
}

.ip-gallery .ip-screen img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.ip-gallery-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-card-border);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-text-body);
}

.ip-gallery-caption p {
  flex: 1 1 320px;
}

.ip-gallery-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.ip-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--color-navy);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
  background-color: var(--color-white);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ip-zoom-btn:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.ip-zoom-btn svg {
  width: 16px;
  height: 16px;
}

.ip-lightbox {
  width: 96vw;
  max-width: 1500px;
  height: 92vh;
  max-height: none;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 16px;
  background-color: var(--color-white);
  overflow: hidden;
}

.ip-lightbox[open] {
  display: flex;
  flex-direction: column;
}

.ip-lightbox::backdrop {
  background: rgba(14, 30, 45, 0.78);
}

.ip-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-5);
  border-bottom: 1px solid var(--color-card-border);
  font-size: 0.95rem;
  color: var(--color-navy);
}

.ip-lightbox-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-canvas-alt);
}

.ip-lightbox-body img {
  display: block;
  width: 100%;
  min-width: 900px;
  max-width: none;
  height: auto;
}

/* Diálogo informativo (acesso à aplicação) */
.ip-dialog {
  width: 92%;
  max-width: 540px;
  margin: auto;
  padding: var(--spacing-8);
  border: none;
  border-radius: 28px 28px 28px 8px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.ip-dialog::backdrop {
  background: rgba(14, 30, 45, 0.6);
}

.ip-dialog .ip-h3 {
  font-size: 1.35rem;
  margin-bottom: var(--spacing-3);
}

.ip-dialog .ip-text + .ip-text {
  margin-top: var(--spacing-3);
}

.ip-access {
  text-align: center;
}

.ip-access .ip-band-content {
  max-width: 720px;
  margin: 0 auto;
}

.ip-access .ip-actions {
  justify-content: center;
}

.ip-access .band-b1 {
  opacity: 0.3;
}

.ip-access .band-b2 {
  right: auto;
  left: 0;
  width: 14%;
  height: 34%;
  border-radius: 0 100% 0 0 / 0 100% 0 0;
}

.ip-access-status {
  margin-top: var(--spacing-5);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #d5e2ee;
}

/* --------------------------------------------------------------------------
   8b. Composições de abertura por página e utilitários
   -------------------------------------------------------------------------- */
.section-gap {
  margin-top: var(--spacing-8);
}

.ip-audience.is-stack {
  grid-template-columns: minmax(0, 1fr);
  padding: var(--spacing-6);
  background-color: var(--color-canvas);
  border-radius: 28px 28px 28px 8px;
}

.ip-section.is-peach .ip-audience.is-stack {
  background-color: var(--color-white);
}

.ip-return {
  margin-top: var(--spacing-8);
  text-align: center;
}

.band-b1 { right: -6%; top: -30%; width: 34%; height: 90%; opacity: 0.55; }
.band-b2 { right: 8%; bottom: 0; width: 22%; height: 42%; }
.founder-b1 { right: -14%; top: -18%; width: 52%; height: 60%; opacity: 0.6; }

/* Educadores: a educadora diante do quadro verde */
.art-edu .b1 { left: 0; top: 16%; width: 44%; height: 48%; }
.art-edu .b2 { right: 0; top: 0; width: 38%; height: 40%; }
.art-edu .b3 { left: 4%; bottom: 0; width: 52%; height: 34%; }
.art-edu .b4 { right: 0; bottom: 4%; width: 32%; height: 22%; border-radius: 0 100% 0 0 / 0 100% 0 0; }
.art-edu .ip-photo { left: 4%; top: 12%; width: 93%; height: 74%; border-radius: 38% 62% 44% 56% / 50% 46% 54% 50%; }
.art-edu .ip-photo img { object-position: 25% center; }
.art-edu .ip-rays { left: 0; top: 0; }

/* Famílias: o pai e as crianças, em tons quentes */
.art-fam .b1 { left: 2%; top: 4%; width: 92%; height: 90%; }
.art-fam .b2 { right: 3%; top: 4%; width: 16%; aspect-ratio: 1; }
.art-fam .b3 { left: 0; bottom: 6%; width: 26%; height: 24%; }
.art-fam .ip-photo { left: 10%; top: 10%; width: 80%; height: 78%; border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%; }
.art-fam .ip-photo img { object-position: 100% center; }
.art-fam .ip-leaves { right: -2%; bottom: 0; }

/* Sobre: a sala de aula */
.art-about .b1 { right: 0; top: 4%; width: 56%; height: 58%; }
.art-about .b2 { left: 2%; bottom: 6%; width: 40%; height: 30%; border-radius: 0 100% 0 0 / 0 100% 0 0; }
.art-about .ip-photo { left: 4%; top: 16%; width: 92%; height: 64%; border-radius: 30% 70% 44% 56% / 60% 48% 52% 40%; }
.art-about .ip-photo img { object-position: 35% center; }
.art-about .ip-leaves { right: 0; top: -4%; width: 96px; }
.art-about .ip-rays { left: 0; top: 4%; }

/* Conteúdos: folhas de texto empilhadas */
.art-content .b1 { left: 4%; top: 6%; width: 88%; height: 86%; opacity: 0.35; }
.art-content .b2 { right: 2%; bottom: 4%; width: 26%; height: 20%; border-radius: 100% 0 0 0 / 100% 0 0 0; }
.art-content .ip-rays { right: 4%; top: 0; transform: scaleX(-1); }

/* Contato: balões de conversa */
.art-contact .b1 { left: 6%; top: 8%; width: 86%; height: 84%; opacity: 0.45; }
.art-contact .b2 { right: 10%; bottom: 8%; width: 12%; aspect-ratio: 1; }
.art-contact .ip-rays { right: 6%; top: 2%; transform: scaleX(-1); }

/* Biblioteca: a tela do produto */
.art-product .b1 { left: 0; top: 0; width: 80%; height: 86%; }
.art-product .b2 { right: 0; bottom: 0; width: 46%; height: 44%; border-radius: 100% 0 0 0 / 100% 0 0 0; }
.art-product .b3 { left: 6%; bottom: 2%; width: 24%; height: 22%; }

/* --------------------------------------------------------------------------
   9. Rodapé e ajustes de componentes nas páginas internas
   -------------------------------------------------------------------------- */
.footer-link.is-accent {
  color: #f6a987;
  font-weight: var(--font-weight-semibold);
}

.footer-note {
  font-size: 0.8rem;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   10. Responsividade
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .ip-tiles.is-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ip-tiles.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-hero-grid { gap: var(--spacing-8); }
}

@media (max-width: 900px) {
  .ip-hero {
    padding: var(--spacing-8) 0 var(--spacing-12);
  }

  .ip-hero-grid,
  .ip-split,
  .ip-split.is-wide-left {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-8);
  }

  .ip-hero.is-reversed .ip-hero-art {
    order: 0;
  }

  .ip-hero-art {
    max-width: 460px;
  }

  .ip-section {
    padding: var(--spacing-12) 0;
  }

  .ip-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--spacing-3) var(--spacing-4);
    padding: var(--spacing-6) 0;
  }

  .ip-row::before {
    grid-row: span 2;
    font-size: 2.4rem;
  }

  .ip-columns,
  .ip-tiles,
  .ip-tiles.is-five,
  .ip-status-grid,
  .ip-articles,
  .ip-related {
    grid-template-columns: minmax(0, 1fr);
  }

  .ip-column {
    padding: var(--spacing-6) 0;
    border-left: none;
    border-top: 1px solid var(--ip-line);
  }

  .ip-column:first-child {
    border-top: none;
    padding-top: 0;
  }

  .ip-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-8);
  }

  .ip-steps::before {
    display: none;
  }

  .ip-concept {
    grid-template-columns: minmax(0, 1fr);
  }

  .ip-concept-arrow {
    width: 64px;
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .ip-band {
    padding: var(--spacing-10) var(--spacing-6);
    border-radius: 28px 28px 28px 10px;
  }

  .ip-checks.is-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-inner .features-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .ip-tiles.is-four,
  .ip-tiles.is-five,
  .ip-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ip-actions .btn {
    flex: 1 1 100%;
  }

  .ip-quote {
    padding-left: 0;
    padding-top: 72px;
  }

  .ip-quote::before {
    font-size: 6rem;
    top: 0;
  }

  .ip-form {
    padding: var(--spacing-6) var(--spacing-5);
  }

  .ip-audience {
    grid-template-columns: minmax(0, 1fr);
  }

  .ip-empty {
    flex-direction: column;
    align-items: flex-start;
  }

  .ip-free-seal {
    width: 88px;
    height: 88px;
    font-size: 1rem;
  }

  .ip-gallery-tabs {
    justify-content: flex-start;
  }

  .ip-lightbox {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-inner *,
  .page-inner *::before,
  .page-inner *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}