html { overflow-x: hidden; }
body { overflow-x: hidden; text-rendering: optimizeLegibility; }
img, svg, video, canvas { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #7a2e3a; outline-offset: 3px; }

body:not(.library-page) .site-header { box-shadow: 0 4px 20px rgba(47,71,54,.08); }
body:not(.library-page) .header-inner { min-height: 76px; }
body:not(.library-page) .brand strong { font-size: clamp(26px,3vw,34px); }
body:not(.library-page) .hero { padding: 0; background: #fff; }
body:not(.library-page) .hero > .container,
body:not(.library-page) .hero-grid { width: 100%; max-width: none; margin: 0; }
body:not(.library-page) .hero-grid { display: block; }
body:not(.library-page) .hero-copy { display: none; }
body:not(.library-page) .carousel {
  width: 100%; min-height: 0; height: clamp(360px, 52vw, 680px);
  border-radius: 0; box-shadow: none; background: #34493a;
  cursor: default; touch-action: pan-y; isolation: isolate;
}
body:not(.library-page) .slide {
  background-size: cover; background-position: center; transform: scale(1.015);
}
body:not(.library-page) .slide.active { transform: scale(1); }
body:not(.library-page) .slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.12));
  pointer-events: none;
}

body:not(.library-page) .slide:first-child .slide-overlay-teacher,
body:not(.library-page) .slide:first-child .slide-feature-rotator,
body:not(.library-page) .slide:nth-child(2) .slide-overlay-content,
body:not(.library-page) .slide:nth-child(3) .slide-overlay-evaluation,
body:not(.library-page) .slide:nth-child(4) .slide-overlay-time {
  display: block !important;
}

body:not(.library-page) .slide:not(.active) .slide-overlay,
body:not(.library-page) .slide:not(.active) .slide-feature-rotator {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  body:not(.library-page) .carousel-arrow { display: none !important; }
}

body:not(.library-page) .carousel-dots {
  left: 50%; bottom: 18px; z-index: 8; padding: 9px 12px;
  border-radius: 999px; background: rgba(30,38,31,.46); backdrop-filter: blur(8px);
}
body:not(.library-page) .carousel-dots button {
  width: 11px; height: 11px; padding: 0;
  background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.82);
  transition: width .2s ease, background .2s ease;
}
body:not(.library-page) .carousel-dots button.active {
  width: 28px; border-radius: 999px; background: #fff;
}
body:not(.library-page) .section-heading { max-width: 820px; margin-inline: auto; }
body:not(.library-page) .section-heading h2 { font-size: clamp(32px,4vw,48px); }
body:not(.library-page) .home-library-highlight,
body:not(.library-page) .photo-activity-launcher,
body:not(.library-page) .ai-content-feature,
body:not(.library-page) .feature-card,
body:not(.library-page) .service-card { box-shadow: 0 14px 34px rgba(47,71,54,.10); }
body:not(.library-page) .feature-card,
body:not(.library-page) .service-card { height: 100%; }
body:not(.library-page) dialog {
  max-width: min(920px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
}

/* Categorias dos desenhos: texto centralizado e sem corte. */
body:not(.library-page) .demo-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body:not(.library-page) .demo-category {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 94px;
  padding: 14px 12px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  hyphens: none;
}

@media (max-width: 980px) {
  body:not(.library-page) .cards-grid,
  body:not(.library-page) .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  body:not(.library-page) .header-inner { min-height: 68px; }
  body:not(.library-page) .brand { min-width: 0; }
  body:not(.library-page) .brand strong { font-size: 25px; }
  body:not(.library-page) .brand span { font-size: 12px; line-height: 1.2; }

  /* Carrossel no celular.
     As fotos sao 1672x941 (16:9). A proporcao 3/2 corta so ~8% das laterais,
     mantendo cada professora inteira no enquadramento, e da altura suficiente
     para o texto. NUNCA usar background-size com dois valores aqui: cada slide
     tem uma unica camada de imagem, entao "100% 100%" a estica e achata. */
  body:not(.library-page) .carousel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #2f4736;
  }

  body:not(.library-page) .slide {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: #2f4736 !important;
  }

  /* Ponto focal por slide: mantem a professora centralizada no corte. */
  body:not(.library-page) .slide:nth-child(1) { background-position: 40% center !important; }
  body:not(.library-page) .slide:nth-child(2) { background-position: 52% center !important; }
  body:not(.library-page) .slide:nth-child(3) { background-position: 50% center !important; }
  body:not(.library-page) .slide:nth-child(4) { background-position: 44% center !important; }

  /* Deriva mais suave no celular: so escala, sem deslocamento lateral,
     para nao comer as margens ja apertadas do corte. */
  body:not(.library-page) .slide,
  body:not(.library-page) .slide.active {
    animation: carousel-drift-mobile 20s ease-in-out infinite alternate !important;
  }

  /* Gradiente de leitura: escurece so onde o texto encosta. */
  body:not(.library-page) .slide::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,0) 44%),
      linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.44) 26%, rgba(0,0,0,0) 56%);
  }

  body:not(.library-page) .slide.active .slide-overlay,
  body:not(.library-page) .slide.active .slide-feature-rotator {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* ------------------------------------------------------------------
     Textos dos slides no celular.
     O layout do desktop coloca o texto AO LADO da professora. Numa caixa
     de ~390x260 nao ha lateral livre: o cartao cai em cima do rosto dela.
     No celular o texto vai para o rodape, sobre o gradiente, em branco e
     ocupando a largura toda. Assim a foto fica inteira e o texto legivel.
     ------------------------------------------------------------------ */
  body:not(.library-page) .slide .slide-overlay {
    top: auto !important;
    right: 20px !important;
    bottom: 34px !important;
    left: 20px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    text-align: left !important;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
  }

  body:not(.library-page) .slide .slide-overlay .slide-kicker,
  body:not(.library-page) .slide .slide-overlay h2,
  body:not(.library-page) .slide .slide-overlay h2 em,
  body:not(.library-page) .slide .slide-overlay p,
  body:not(.library-page) .slide .slide-overlay p strong,
  body:not(.library-page) .slide .slide-overlay span,
  body:not(.library-page) .slide .slide-overlay .slide-support {
    color: #fff !important;
    text-shadow: inherit !important;
  }

  body:not(.library-page) .slide .slide-overlay .slide-kicker {
    margin-bottom: 6px !important;
    font-size: clamp(9px, 2.6vw, 11px) !important;
    letter-spacing: .16em !important;
  }

  body:not(.library-page) .slide .slide-overlay h2 {
    max-width: 100% !important;
    margin: 0 0 7px !important;
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1 !important;
  }

  body:not(.library-page) .slide .slide-overlay h2 em {
    color: #f2c977 !important;
  }

  body:not(.library-page) .slide .slide-overlay p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(13px, 3.6vw, 17px) !important;
    line-height: 1.3 !important;
  }

  /* Linha de apoio do slide 1: sai no celular. Numa caixa de ~260px de altura
     ela empurra o titulo para cima do rotator, e o conteudo dela ja aparece
     nas mensagens rotativas ("PDF, Word editavel ou ambos", etc). */
  body:not(.library-page) .slide .slide-overlay .slide-support {
    display: none !important;
  }

  /* Slide 4: "TEMPO E VIDA" e uma frase solta, sem h2/p. */
  body:not(.library-page) .slide:nth-child(4) .slide-overlay-time span {
    font-size: clamp(30px, 8.6vw, 44px) !important;
    line-height: .95 !important;
  }
  body:not(.library-page) .slide:nth-child(4) .slide-overlay-time span::before {
    width: 52px !important;
    margin: 0 0 10px !important;
    background: #f2c977 !important;
  }

  /* Rotator do slide 1: uma mensagem por vez, no topo, fora do rodape.
     Substitui o transform: scale(.36) que encolhia a pilha inteira. */
  body:not(.library-page) .slide:first-child .slide-feature-rotator {
    top: 14px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(58vw, 250px) !important;
    min-height: 54px !important;
    transform: none !important;
  }
  body:not(.library-page) .slide:first-child .feature-message {
    inset: 0 !important;
    top: 0 !important;
    min-height: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    text-align: right !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
    animation-name: feature-message-slide !important;
    animation-duration: 20s !important;
    animation-delay: var(--feature-delay) !important;
  }
  body:not(.library-page) .slide:first-child .feature-message::before {
    width: 26px !important;
    height: 2px !important;
    margin: 0 0 2px auto !important;
    background: #f2c977 !important;
  }
  body:not(.library-page) .slide:first-child .feature-message small {
    color: #fff !important;
    font-size: clamp(8px, 2.3vw, 10px) !important;
    letter-spacing: .14em !important;
  }
  body:not(.library-page) .slide:first-child .feature-message strong {
    max-width: 100% !important;
    color: #fff !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
    line-height: 1.12 !important;
  }

  body:not(.library-page) .carousel-dots {
    bottom: 6px;
    padding: 4px 6px;
    gap: 6px;
  }
  body:not(.library-page) .carousel-dots button {
    width: 7px;
    height: 7px;
  }
  body:not(.library-page) .carousel-dots button.active { width: 18px; }

  body:not(.library-page) .section { padding: 44px 0; }
  body:not(.library-page) .cards-grid,
  body:not(.library-page) .service-grid,
  body:not(.library-page) .stats-grid { grid-template-columns: 1fr; }
  body:not(.library-page) .btn,
  body:not(.library-page) button:not(.carousel-dots button):not(.carousel-arrow) { max-width: 100%; }
  body:not(.library-page) .home-library-highlight {
    grid-template-columns: 72px minmax(0,1fr); padding: 18px 16px;
  }
  body:not(.library-page) .home-library-copy,
  body:not(.library-page) .photo-launcher-copy { min-width: 0; }

  body:not(.library-page) .demo-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not(.library-page) .demo-category {
    min-height: 84px;
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  /* Telas bem estreitas: aperta as margens laterais. */
  body:not(.library-page) .slide .slide-overlay {
    right: 15px !important;
    left: 15px !important;
    bottom: 30px !important;
  }
  body:not(.library-page) .slide:first-child .slide-feature-rotator {
    top: 10px !important;
    right: 12px !important;
    width: min(62vw, 210px) !important;
  }
  body:not(.library-page) .container { width: min(100% - 20px,1240px); }
  body:not(.library-page) .home-library-highlight {
    grid-template-columns: 58px minmax(0,1fr); gap: 10px; border-radius: 22px;
  }
  body:not(.library-page) .home-library-highlight strong { font-size: 22px; }
  body:not(.library-page) .home-library-copy > span { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@keyframes carousel-drift-mobile {
  from { transform: scale(1.02); }
  to   { transform: scale(1.05); }
}