:root{
  --green-900:#2f4736;
  --green-700:#56705a;
  --green-500:#7e9880;
  --green-100:#edf2eb;
  --cream:#fbf8f1;
  --beige:#f1eadf;
  --gold:#c4944b;
  --wine:#7a2e3a;
  --wine-dark:#662530;
  --wine-soft:#f5e9ec;
  --text:#283229;
  --muted:#5f6a61;
  --white:#ffffff;
  --border:#dfe5dc;
  --shadow:0 16px 40px rgba(73,91,75,.12);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--white);
  font-size:18px;
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1240px,calc(100% - 40px));margin-inline:auto}

.skip-link{position:absolute;left:-9999px;top:10px;background:#fff;padding:12px 18px;z-index:999}
.skip-link:focus{left:10px}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.site-header{
  backdrop-filter:blur(10px);z-index:50;border-bottom:1px solid var(--border);
}
.brand strong{
  display:block;font-family:"Libre Franklin",sans-serif;
}
.brand span{display:block;color:var(--muted);font-size:15px}

.home-library-highlight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  align-items: center;
  width: 100%;
  margin: 0 0 30px;
  min-height: 210px;
  padding: 24px 38px;
  gap: 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 44px;
  color: #fff;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-library-highlight::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 40px;
}

.home-library-highlight:hover,
.home-library-highlight:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 28px 44px rgba(68, 6, 24, .36),
    0 10px 20px rgba(48, 5, 18, .25),
    0 0 34px rgba(185, 45, 82, .26);
}

.home-library-highlight:focus-visible {
  outline: 4px solid rgba(122, 46, 58, .30);
  outline-offset: 5px;
}

.home-library-illustration {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.home-library-illustration svg {
  display: block;
  width: 100%;
  max-width: 170px;
  filter: drop-shadow(0 12px 12px rgba(37, 3, 13, .30));
}

.library-page-back { fill: #fff8ed; }
.library-page-fold { fill: none; stroke: #f0c3b2; stroke-width: 5; stroke-linejoin: round; }
.library-book { stroke: rgba(255, 255, 255, .75); stroke-width: 3; }
.library-book-one { fill: #f1b83b; }
.library-book-two { fill: #61c3ad; }
.library-book-three { fill: #e9829b; }
.library-book-line { fill: none; stroke: rgba(69, 13, 31, .62); stroke-width: 5; stroke-linecap: round; }
.library-check { fill: #fff; stroke: #f3c3cf; stroke-width: 4; }
.library-check-mark { fill: none; stroke: #8b1231; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.library-spark { fill: none; stroke: #ffd96a; stroke-width: 7; stroke-linecap: round; }

.home-library-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.home-library-highlight strong {
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  text-shadow: 0 3px 10px rgba(33, 2, 11, .28);
}

.home-library-copy > span {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  text-shadow: 0 2px 7px rgba(33, 2, 11, .24);
}

.home-autism-highlight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  align-items: center;
  width: 100%;
  min-height: 210px;
  margin: 0 0 30px;
  padding: 24px 38px;
  gap: 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 44px;
  background: linear-gradient(135deg, #064b93 0%, #087fbd 48%, #10a89a 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 36px rgba(5, 75, 147, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-autism-highlight::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: linear-gradient(90deg, #ef476f 0 20%, #ffd166 20% 40%, #06d6a0 40% 60%, #118ab2 60% 80%, #8a4fff 80% 100%);
}

.home-autism-highlight::after {
  content: "";
  position: absolute;
  inset: 11px 2px 2px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 40px;
}

.home-autism-highlight:hover,
.home-autism-highlight:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 28px 44px rgba(5, 75, 147, .34),
    0 10px 20px rgba(4, 63, 124, .24),
    0 0 34px rgba(6, 214, 160, .25);
}

.home-autism-highlight:focus-visible {
  outline: 4px solid rgba(17, 138, 178, .35);
  outline-offset: 5px;
}

.home-autism-illustration,
.home-autism-copy {
  position: relative;
  z-index: 1;
}

.home-autism-illustration {
  display: grid;
  place-items: center;
}

.home-autism-illustration svg {
  display: block;
  width: 100%;
  max-width: 170px;
  filter: drop-shadow(0 12px 12px rgba(2, 42, 83, .3));
}

.autism-symbol-backdrop { fill: rgba(255, 255, 255, .96); }
.autism-infinity-shadow { fill: none; stroke: rgba(0, 45, 91, .18); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.autism-infinity-symbol { fill: none; stroke: url(#autism-infinity-spectrum); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.autism-spark-red { fill: #ef476f; }
.autism-spark-yellow { fill: #ffd166; }
.autism-spark-green { fill: #06d6a0; }
.autism-spark-purple { fill: #b785ff; }

.home-autism-copy {
  display: grid;
  gap: 9px;
}

.home-autism-badge {
  width: fit-content;
  padding: 5px 11px;
  border-radius: 999px;
  background: #ffd166;
  color: #17324d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.home-autism-highlight strong {
  color: #fff;
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  text-shadow: 0 3px 10px rgba(2, 42, 83, .28);
}

.home-autism-copy > span:last-child {
  color: #fff;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  text-shadow: 0 2px 7px rgba(2, 42, 83, .24);
}

@media (max-width: 680px) {
  .home-autism-highlight {
    min-height: 160px;
    padding: 22px 20px;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    border-radius: 28px;
  }
  .home-autism-highlight::after { border-radius: 24px; }
  .home-autism-illustration svg { max-width: 88px; }
  .home-autism-badge { font-size: 10px; }
  .home-autism-highlight strong { font-size: clamp(23px, 7vw, 31px); }
  .home-autism-copy > span:last-child { font-size: 14px; line-height: 1.35; }
}

.hero-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:46px;align-items:center}
.eyebrow,.section-heading span{
  display:inline-block;color:var(--wine);font-size:14px;font-weight:800;letter-spacing:.14em;
}
.hero h1,.split-copy h2,.section-heading h2{
  font-family:"Libre Franklin",sans-serif;
  letter-spacing:-.035em;
  line-height:1.1;
}
.hero h1{font-size:clamp(48px,6vw,72px);margin:14px 0 22px}
.hero h1 em{color:var(--green-700);font-style:italic}
.hero-text{font-size:23px;max-width:620px;margin:0 0 5px}
.hero-highlight{font-size:23px;color:var(--wine);font-weight:700;margin:0 0 28px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  border:0;border-radius:12px;padding:14px 22px;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;font-weight:700;cursor:pointer;transition:.25s ease;
}
.btn:hover,.btn:focus{transform:translateY(-3px);box-shadow:0 12px 26px rgba(52,75,58,.18)}
.btn-primary{background:var(--green-700);color:#fff}
.btn-outline{
  background:rgba(255,255,255,.7);
  border:2px solid #d8c0c6;
  color:var(--wine-dark);
}
.btn-outline:hover,.btn-outline:focus{
  background:var(--wine-soft);
  border-color:var(--wine);
}
.btn-large{min-height:56px;font-size:19px}
.trust-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;color:var(--muted);font-size:15px}

.carousel{
  position:relative;min-height:480px;border-radius:26px;overflow:hidden;
}
.slides,.slide{position:absolute;inset:0}
.carousel-arrow{
  position:absolute;top:48%;transform:translateY(-50%);z-index:5;width:48px;height:48px;
  border-radius:50%;border:0;background:#fff;color:var(--wine);font-size:36px;cursor:pointer;box-shadow:var(--shadow)
}
.carousel-arrow:hover{transform:translateY(-50%) scale(1.08);background:var(--wine-soft)}
.prev{left:12px}.next{right:12px}
.carousel-dots{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);display:flex;gap:10px}
.carousel-dots button{width:12px;height:12px;border-radius:50%;border:0;background:#c7c6b8;cursor:pointer}

.section{padding:60px 0}
.cards-grid,.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature-card,.service-card{
  border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:#fff;transition:.25s ease;
}
.icon{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--green-100);
}
.feature-card:hover .icon,
.service-card:hover .icon{
  background:var(--wine-soft);
  border-color:#e2bcc4;
}
.feature-card h3,.service-card h3{font-size:25px;margin:0 0 10px}
.feature-card a,.service-card a{color:var(--wine);font-weight:800}

.section-soft{background:linear-gradient(90deg,#f6f1e9,#fff)}
#sobre.section{padding-bottom:48px}
.split{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(380px,.92fr);gap:40px;align-items:center}
.teacheasy-workflow{
  position:relative;margin:0;padding:12px;border:1px solid rgba(122,46,58,.13);border-radius:32px;
  background:#fff;box-shadow:var(--shadow);overflow:hidden;
}
.teacheasy-workflow img{
  display:block;width:110%;max-width:none;height:auto;
  transform:translateX(-7%);border-radius:19px;
  animation:teacherImagePan 12s ease-in-out -3s infinite alternate;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .teacheasy-workflow:hover img{
    animation-play-state:paused;
  }
}
@keyframes teacherImagePan{
  from{transform:translateX(-7%)}
  to{transform:translateX(-2%)}
}
@media (max-width:768px){
  .teacheasy-workflow img{
    width:105%;transform:translateX(-3.5%);
    animation-duration:18s;animation-delay:-4s;
  }
  @keyframes teacherImagePan{
    from{transform:translateX(-3.5%)}
    to{transform:translateX(-1%)}
  }
}
.split-copy h2{font-size:46px;margin:16px 0}
.split-copy > h2:first-child{margin-top:0}
.split-copy p{font-size:19px;color:var(--muted)}
.check-list{padding:0;list-style:none}
.check-list li{margin:10px 0;padding-left:30px;position:relative;font-size:18px}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--wine);font-weight:900}

.section-heading{text-align:center;margin-bottom:28px}
.section-heading h2{font-size:44px;margin:8px 0}
.service-card{min-height:260px}
.stats{
  background:linear-gradient(90deg,#f3eee4,#f8eff1);
  padding:34px 0;border-top:1px solid #e9e1d3
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stats-grid>div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px}
.stats strong{font-size:28px;color:var(--wine)}
.stats span{font-size:16px;color:var(--muted)}
.footer{padding:30px 0;background:var(--green-900);color:#fff}
.footer .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width: 980px){
  body{font-size:17px}
  .hero-grid,.split{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 680px){
  .container{width:min(100% - 24px,1240px)}
  .home-library-highlight{
    width:100%;
    min-height:148px;
    gap:14px;
    border-radius:28px;
  }
  .home-library-highlight::after{border-radius:24px}
  .home-library-illustration svg{max-width:82px}
  .home-library-highlight strong{font-size:clamp(24px,7vw,32px)}
  .home-library-copy{gap:7px}
  .home-library-copy > span{font-size:15px;line-height:1.35}
  .teacheasy-workflow{padding:10px;border-radius:22px}
  .teacheasy-workflow img{border-radius:15px}
  .hero{padding-top:34px}
  .hero h1{font-size:43px}
  .hero-text,.hero-highlight{font-size:20px}
  .section{padding:42px 0}
  #sobre.section{padding-bottom:34px}
  .split-copy h2,.section-heading h2{font-size:36px}
}

/* Full-width image-only hero carousel */

.carousel-dots button {
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}

/* Hero image generated for TeachEasy */
.slide:nth-child(1) {
  background-image: url('assets/professora-loira-hero-4k.png');
}

/* Cohesive classroom carousel images */
.slide:nth-child(2) {
  background-image: url('assets/professora-alunos-uniforme-4k.png');
}

.slide:nth-child(3) {
  background-image: url('assets/professora-negra-alunos-4k.png');
}

.slide:nth-child(4) {
  background-image: url('assets/professora-asiatica-alunos-4k.png');
}

/* Keep animated images covering every viewport */

/* Smooth crossfade between carousel slides */

/* Minimal centered TeachEasy brand header */
.site-header {
  position: relative;
  top: auto;
}

.header-inner {
  justify-content: center;
  text-align: center;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 28px 18px;
}

.brand strong {
  position: relative;
  font-family: "Libre Franklin", sans-serif;
  color: var(--wine);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}

.brand strong::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--wine));
}

.brand span {
  color: var(--green-700);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 600;
  letter-spacing: .04em;
}

@media (max-width: 680px) {

  .brand {
    padding: 17px 20px 15px;
  }

  .brand strong {
    font-size: 36px;
  }

  .brand span {
    font-size: 13px;
  }
}

/* Soft depth between the brand bar and carousel */
.site-header {
  z-index: 12;
  border-bottom: 0;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 1;
}

/* Depth only on the TeachEasy name */

.brand strong {
  text-shadow:
    0 2px 2px rgba(82, 31, 41, .16),
    0 5px 10px rgba(82, 31, 41, .14),
    0 12px 24px rgba(82, 31, 41, .10);
}

/* Keep depth on both the white bar and TeachEasy name */

.site-header::after {
  display: block;
}

/* Focused teacher message on the first carousel slide */
.slide:first-child .slide-overlay-teacher {
  position: absolute;
  z-index: 3;
  max-width: none;
}

.slide-kicker {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.slide:first-child .slide-overlay-teacher h2 {
  margin: 0 0 18px;
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(35px, 3.3vw, 54px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}

.slide:first-child .slide-overlay-teacher h2 em {
  font-family: Georgia, "Times New Roman", serif;
}

.slide:nth-child(4) .slide-overlay-time {
  position: absolute;
  z-index: 4;
  max-width: none;
  padding: 0;
  transform: translateX(140px);
}

.slide:nth-child(4).active .slide-overlay-time {
  animation: time-is-life-in 1.15s cubic-bezier(.16, 1, .3, 1) .15s forwards;
}

.slide:nth-child(4) .slide-overlay-time span {
  display: block;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.055em;
}

.slide:nth-child(4) .slide-overlay-time span::before {
  content: "";
  display: block;
  width: 74px;
  height: 4px;
}

@keyframes time-is-life-in {
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .slide:nth-child(3).active .slide-overlay-evaluation,
  .slide:nth-child(4).active .slide-overlay-time {
    animation-duration: .01s;
  }
}

/* Final placement refinements for slides three and four */
.slide:nth-child(3) .slide-overlay-evaluation p {
  max-width: 360px;
  margin: 18px 0 0;
  color: #111;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 700;
  line-height: 1.35;
}

.slide:first-child .slide-overlay-teacher p {
  margin: 0 0 14px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.35;
}

.slide:first-child .slide-overlay-teacher p strong {
  font-weight: 700;
}

.slide-support {
  display: block;
  padding-top: 13px;
}

@media (max-width: 900px) {
  .slide:first-child .slide-overlay-teacher {
    transform: none;
  }
}

/* Open typography beside the teacher's right arm */
.slide:first-child .slide-overlay-teacher {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.slide:first-child .slide-overlay-teacher h2 em {
  font-weight: 700;
}

.slide-support {
  margin-top: 18px;
  padding: 15px 0 0;
  border-top: 2px solid rgba(17, 17, 17, .72);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 800;
  line-height: 1.35;
}

.site-header::after {
  height: 32px;
  bottom: -32px;
}

@media (max-width: 900px) {
  .slide:first-child .slide-overlay-teacher {
    width: min(410px, calc(100% - 56px));
    padding: 0;
  }
}

/* Text on the opposite side, pure black without glow */
.slide:first-child .slide-overlay-teacher {
  color: #000;
  text-shadow: none;
}

.slide-kicker,
.slide:first-child .slide-overlay-teacher h2,
.slide:first-child .slide-overlay-teacher h2 em,
.slide:first-child .slide-overlay-teacher p,
.slide:first-child .slide-overlay-teacher p strong,
.slide-support {
  color: #000;
  text-shadow: none;
}

.slide-support {
  text-transform: uppercase;
  letter-spacing: .035em;
}

@media (max-width: 900px) {
  .slide:first-child .slide-overlay-teacher {
    left: 28px;
    right: auto;
  }
}

/* Higher message and keyboard/pointer navigable carousel */

/* Setas: visiveis apenas em telas grandes com ponteiro preciso.
   No celular a navegacao e por deslize + indicadores. */
.carousel-arrow {
  display: none;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .carousel-arrow {
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease, background .25s ease;
  }

  .carousel:hover .carousel-arrow,
  .carousel:focus-within .carousel-arrow {
    opacity: 1;
  }

  .carousel-arrow:focus-visible {
    opacity: 1;
    outline: 3px solid var(--wine);
    outline-offset: 3px;
  }
}

.carousel:focus-visible {
  outline: 4px solid rgba(122, 46, 58, .75);
  outline-offset: -4px;
}

@media (max-width: 900px) {
  .slide:first-child .slide-overlay-teacher {
    top: auto;
    bottom: 96px;
  }
}

/* Uniformed students and content-generation message on slide two */

.slide:nth-child(2) .slide-overlay-content {
  position: absolute;
  top: 24%;
  left: clamp(94px, 9vw, 150px);
  right: auto;
  z-index: 3;
  width: min(440px, 34vw);
  max-width: none;
  padding: 0;
  color: #fff;
  transform: translateY(-50%);
  text-shadow: 0 3px 14px rgba(0, 0, 0, .62);
}

.slide:nth-child(2) .slide-kicker {
  margin-bottom: 14px;
  color: #fff;
  font-size: 13px;
  letter-spacing: .19em;
}

.slide:nth-child(2) .slide-overlay-content h2 {
  margin: 0 0 20px;
  color: #fff;
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}

.slide:nth-child(2) .slide-overlay-content h2 em {
  display: block;
  color: #f2c977;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.slide:nth-child(2) .slide-overlay-content p {
  max-width: 390px;
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .slide:nth-child(2) .slide-overlay-content {
    top: auto;
    left: 32px;
    bottom: 76px;
    width: min(440px, calc(100% - 64px));
    transform: none;
  }
}

/* One-at-a-time feature messages on the right side of slide one */
.slide-feature-rotator {
  position: absolute;
  right: clamp(92px, 9vw, 150px);
  z-index: 4;
  pointer-events: none;
}

.feature-message {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
  animation: feature-message-slide 20s cubic-bezier(.22, 1, .36, 1) infinite;
}

.feature-message::before {
  content: "";
  border-radius: 999px;
  background: var(--wine);
}

.feature-message small {
  color: var(--wine-dark);
  font-weight: 800;
}

.feature-message strong {
  color: #000;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
  letter-spacing: -.04em;
}

@keyframes feature-message-slide {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }
  4%, 20% {
    opacity: 1;
    transform: translateX(0);
  }
  24%, 100% {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@media (max-width: 900px) {
  .slide-feature-rotator {
    right: 28px;
  }

}

@media (max-width: 560px) {

  .feature-message::before {
    margin-left: auto;
  }

}

@media (prefers-reduced-motion: reduce) {

}

/* Progressive feature stack: each message enters and remains */
.slide-feature-rotator {
  top: 17%;
  width: min(370px, 30vw);
  min-height: 370px;
}

.feature-message {
  inset: auto 0 auto 0;
  min-height: 74px;
  gap: 4px;
  opacity: 0;
  transform: translateX(70px);
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-iteration-count: infinite;
  animation-delay: 0s !important;
}

.feature-message::before {
  width: 34px;
  height: 2px;
  margin-bottom: 1px;
}

.feature-message small {
  font-size: 10px;
  letter-spacing: .16em;
}

.feature-message strong {
  max-width: 350px;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.1;
}

.feature-message:nth-child(1) {
  top: 0;
  animation-name: feature-stack-one;
}

.feature-message:nth-child(2) {
  top: 88px;
  animation-name: feature-stack-two;
}

.feature-message:nth-child(3) {
  top: 176px;
  animation-name: feature-stack-three;
}

.feature-message:nth-child(4) {
  top: 264px;
  animation-name: feature-stack-four;
}

@keyframes feature-stack-one {
  0%, 2% { opacity: 0; transform: translateX(70px); }
  7%, 94% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-18px); }
}

@keyframes feature-stack-two {
  0%, 25% { opacity: 0; transform: translateX(70px); }
  30%, 94% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-18px); }
}

@keyframes feature-stack-three {
  0%, 48% { opacity: 0; transform: translateX(70px); }
  53%, 94% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-18px); }
}

@keyframes feature-stack-four {
  0%, 71% { opacity: 0; transform: translateX(70px); }
  76%, 94% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-18px); }
}

@media (max-width: 900px) {
  .slide-feature-rotator {
    top: 9%;
    width: min(330px, calc(100% - 56px));
    min-height: 330px;
  }

  .feature-message:nth-child(2) { top: 78px; }
  .feature-message:nth-child(3) { top: 156px; }
  .feature-message:nth-child(4) { top: 234px; }

  .feature-message strong {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-message:nth-child(1),
  .feature-message:nth-child(2),
  .feature-message:nth-child(3),
  .feature-message:nth-child(4) {
    animation-name: none;
    opacity: 1;
    transform: none;
  }
}

/* Impact message on slide three */
.slide:nth-child(3) .slide-overlay-evaluation {
  position: absolute;
  top: 15%;
  right: clamp(82px, 8vw, 140px);
  left: auto;
  z-index: 4;
  width: min(390px, 32vw);
  max-width: none;
  padding: 0;
  color: #111;
  transform: translateY(-18px);
}

.slide:nth-child(3).active .slide-overlay-evaluation {
  animation: evaluation-message-in 1s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}

.slide:nth-child(3) .slide-overlay-evaluation .slide-kicker {
  margin-bottom: 12px;
  color: var(--wine);
}

.slide:nth-child(3) .slide-overlay-evaluation h2 {
  margin: 0;
  color: #111;
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(34px, 3.6vw, 56px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}

.slide:nth-child(3) .slide-overlay-evaluation h2 em {
  color: var(--wine);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

@keyframes evaluation-message-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Right-entering statement on slide four */

.slide:nth-child(4) .slide-overlay-time {
  top: 15%;
  left: clamp(84px, 8vw, 136px);
  right: auto;
  bottom: auto;
  color: #111;
  text-align: left;
  text-shadow:
    0 2px 8px rgba(255, 255, 255, .92),
    0 8px 24px rgba(255, 255, 255, .72);
}

.slide:nth-child(4) .slide-overlay-time span {
  color: #111;
  font-size: clamp(42px, 5vw, 72px);
}

.slide:nth-child(4) .slide-overlay-time span::before {
  margin: 0 auto 16px 0;
  background: var(--wine);
}

@media (max-width: 900px) {
  .slide:nth-child(4) .slide-overlay-time {
    top: 12%;
    left: 28px;
    right: auto;
    bottom: auto;
  }
}

/* Seamless television-style carousel dissolve */
.slide {
  z-index: 0;
  opacity: 0;
  transform-origin: center center;
  will-change: opacity, transform;
  transition: opacity 2.25s cubic-bezier(.42, 0, .18, 1) !important;
  animation: television-camera-drift 18s ease-in-out infinite alternate !important;
}

.slide.active {
  z-index: 1;
  opacity: 1;
  animation: television-camera-drift 18s ease-in-out infinite alternate !important;
}

.slide:nth-child(2) { animation-delay: -4s !important; }
.slide:nth-child(3) { animation-delay: -8s !important; }
.slide:nth-child(4) { animation-delay: -12s !important; }

@keyframes television-camera-drift {
  0% {
    transform: scale(1.035) translate3d(-.45%, -.15%, 0);
  }
  50% {
    transform: scale(1.055) translate3d(.25%, .15%, 0);
  }
  100% {
    transform: scale(1.075) translate3d(.55%, -.1%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .teacheasy-workflow img {
    width: 100%;
    animation: none !important;
    transform: none !important;
  }

  .slide,
  .slide.active {
    animation: none !important;
    transform: scale(1) !important;
    transition-duration: .65s !important;
  }
}

/* Four initial services */
.initial-services {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(122, 46, 58, .075), transparent 28%),
    radial-gradient(circle at 92% 88%, rgba(86, 112, 90, .10), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fbf8f1 100%);
}

.initial-services-heading {
  margin: 0 auto 36px;
}

.initial-services-heading p {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}

.initial-services-grid {
  align-items: stretch;
}

.initial-service-card {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 28px 27px;
  background: var(--demo-card-background, rgba(255, 255, 255, .88));
  backdrop-filter: blur(8px);
}

.initial-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--demo-card-accent, linear-gradient(90deg, var(--wine), var(--gold)));
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .35s ease;
}

.initial-service-card:hover::before {
  transform: scaleX(1);
}

.initial-service-card .icon {
  width: 78px;
  height: 78px;
  margin-bottom: 20px;
  border: 0;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(86, 112, 90, .14);
  font-size: 42px;
}

.initial-service-card h3 {
  max-width: none;
  margin-bottom: 12px;
  font-family: "Libre Franklin", sans-serif;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.initial-service-card p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.initial-service-card[data-demo-theme="rose"] {
  --demo-card-background: linear-gradient(145deg,#fff1f2,#f9dde3);
  --demo-card-accent: linear-gradient(90deg,#a33b55,#d8899b);
}
.initial-service-card[data-demo-theme="mint"] {
  --demo-card-background: linear-gradient(145deg,#effaf3,#dcefe3);
  --demo-card-accent: linear-gradient(90deg,#4f8064,#91bea0);
}
.initial-service-card[data-demo-theme="blue"] {
  --demo-card-background: linear-gradient(145deg,#eef7fb,#dcecf4);
  --demo-card-accent: linear-gradient(90deg,#47758b,#8eb9ca);
}
.initial-service-card[data-demo-theme="lilac"] {
  --demo-card-background: linear-gradient(145deg,#f6f0fb,#e9ddf2);
  --demo-card-accent: linear-gradient(90deg,#765582,#b99bc5);
}

@media (max-width: 980px) {
  .initial-service-card {
    min-height: 330px;
  }
}

@media (max-width: 680px) {
  .initial-services-heading {
    margin-bottom: 32px;
  }

  .initial-services-heading p {
    font-size: 17px;
  }

  .initial-service-card {
    min-height: 0;
  }
}

/* Clickable service cards and detail dialog */
.initial-service-card[role="button"] {
  cursor: pointer;
}

.initial-service-card[role="button"]:focus-visible {
  outline: 4px solid rgba(122, 46, 58, .35);
  outline-offset: 4px;
}

.service-open-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  color: var(--green-700);
  font-size: 14px;
  font-weight: 800;
}

.service-open-hint b {
  color: var(--wine);
  font-size: 21px;
  transition: transform .25s ease;
}

.initial-service-card:hover .service-open-hint b {
  transform: translateX(5px);
}

.service-dialog.demo-mode .service-dialog-columns {
  display: block;
}
.demo-showcase {
  margin-top: 24px;
}
.demo-carousel {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 48px;
  align-items: center;
  gap: 14px;
}
.demo-carousel-button {
  width: 46px;height:46px;border:0;border-radius:50%;
  background:var(--wine);color:#fff;font-size:25px;cursor:pointer;
}
.demo-slide {
  min-height:260px;padding:28px;border-radius:22px;
  background:linear-gradient(145deg,#fff8f3,#f4e7e2);
  box-shadow:inset 0 0 0 1px rgba(122,46,58,.12);
}
.demo-slide small,.demo-slide strong{display:block}
.demo-slide small{color:var(--wine);font-weight:800}
.demo-slide strong{margin:8px 0;font-size:25px}
.demo-slide p{margin:0;color:var(--muted)}
.demo-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.demo-dots span{width:9px;height:9px;border-radius:50%;background:#d5c6c2}
.demo-dots span.active{background:var(--wine)}
.demo-category-grid,.demo-game-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.demo-category,.demo-game {
  min-height:88px;padding:16px;border:1px solid rgba(86,112,90,.18);
  border-radius:16px;background:#fff;color:var(--green-900);
  font:inherit;font-weight:800;text-align:center;
}
button.demo-category{cursor:pointer}
.demo-category:hover,.demo-category.active{background:var(--wine-soft);border-color:#c98292}
.demo-surprise {
  width:100%;margin-top:14px;padding:14px;border:0;border-radius:14px;
  background:var(--wine);color:#fff;font:inherit;font-weight:800;cursor:pointer;
}
.demo-surprise-result{min-height:28px;margin:12px 0 0;text-align:center;font-weight:800;color:var(--wine)}
.ai-demo-flow {
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.ai-demo-step {
  position:relative;min-height:150px;padding:18px 12px;border-radius:18px;
  background:#f8f3ef;text-align:center;opacity:.45;transform:translateY(6px);
  animation:ai-demo-progress 8s ease-in-out infinite;
}
.ai-demo-step:nth-child(2){animation-delay:2s}
.ai-demo-step:nth-child(3){animation-delay:4s}
.ai-demo-step:nth-child(4){animation-delay:6s}
.ai-demo-step b{display:grid;width:38px;height:38px;margin:0 auto 10px;place-items:center;border-radius:50%;background:var(--wine);color:#fff}
.ai-demo-step strong{display:block;font-size:16px}
.ai-demo-step span{display:block;margin-top:6px;color:var(--muted);font-size:13px}
@keyframes ai-demo-progress {
  0%,22%{opacity:1;transform:translateY(0);box-shadow:0 12px 24px rgba(122,46,58,.16)}
  28%,100%{opacity:.45;transform:translateY(6px);box-shadow:none}
}

@media (max-width:680px){
  .demo-carousel{grid-template-columns:38px minmax(0,1fr) 38px;gap:8px}
  .demo-carousel-button{width:38px;height:38px}
  .demo-slide{min-height:230px;padding:20px}
  .demo-category-grid,.demo-game-grid{grid-template-columns:repeat(2,1fr)}
  .ai-demo-flow{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  .ai-demo-step{animation:none;opacity:1;transform:none}
}

.service-dialog {
  width: min(850px, calc(100% - 32px));
  overflow: auto;
  padding: 42px;
  border: 1px solid rgba(86, 112, 90, .18);
  border-radius: 26px;
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0, rgba(122, 46, 58, .09), transparent 34%),
    #fff;
  box-shadow: 0 34px 90px rgba(27, 40, 31, .30);
}

.service-dialog[open] {
  animation: service-dialog-in .35s cubic-bezier(.22, 1, .36, 1);
}

.service-dialog::backdrop {
  background: rgba(28, 39, 31, .62);
  backdrop-filter: blur(7px);
}

@keyframes service-dialog-in {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.service-dialog-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--wine-soft);
  color: var(--wine);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.service-dialog-icon {
  display: grid;
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 20px;
  background: var(--green-100);
  font-size: 32px;
}

.service-dialog-kicker {
  color: var(--wine);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
}

.service-dialog h2 {
  margin: 8px 0 12px;
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.service-dialog-description {
  max-width: 700px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.service-dialog-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.service-dialog-columns > div {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(251, 248, 241, .72);
}

.service-dialog h3 {
  margin: 0 0 14px;
  color: var(--green-900);
  font-size: 18px;
}

.service-dialog ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-dialog li {
  position: relative;
  margin: 10px 0;
  padding-left: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.service-dialog li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wine);
  font-weight: 900;
}

@media (max-width: 680px) {
  .service-dialog {
    padding: 30px 22px 24px;
    border-radius: 20px;
  }

  .service-dialog-columns {
    grid-template-columns: 1fr;
  }

}

/* Sombra mais escura nos oito cards */
.initial-service-card,
.service-card {
  border-color: rgba(45, 76, 58, 0.28);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.initial-service-card:hover,
.initial-service-card:focus-visible,
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-10px);
  box-shadow:
    0 38px 70px rgba(17, 39, 29, 0.34),
    0 17px 30px rgba(17, 39, 29, 0.22),
    0 5px 10px rgba(17, 39, 29, 0.17);
  border-color: rgba(121, 39, 64, 0.42);
}

/* Wine surfaces for the top, footer and primary homepage banners */
body:not(.library-page) .site-header {
  background: linear-gradient(180deg, #3b0714 0%, #5b1022 50%, #7d2639 100%);
  color: #fff;
}

body:not(.library-page) .site-header {
  border-bottom-color: rgba(255, 255, 255, .24);
}

body:not(.library-page) .site-header::after {
  background: linear-gradient(180deg, rgba(59, 7, 20, .28), rgba(59, 7, 20, 0));
}

body:not(.library-page) .site-header .brand strong,
body:not(.library-page) .site-header .brand span,
body:not(.library-page) .site-header a {
  color: #fff;
}

body:not(.library-page) .site-header .brand strong {
  text-shadow:
    0 2px 3px rgba(28, 2, 9, .32),
    0 8px 20px rgba(28, 2, 9, .24);
}

body:not(.library-page) .site-header .brand strong::after {
  background: linear-gradient(90deg, #f0c783, #fff0e9);
}

body:not(.library-page) .footer {
  border-top: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, #3b0714 0%, #5b1022 50%, #7d2639 100%);
  color: #fff;
}

body:not(.library-page) .footer a,
body:not(.library-page) .footer strong,
body:not(.library-page) .footer span {
  color: #fff;
}

/* Criação real de conteúdo por solicitação em texto */
.ai-content-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  width: 100%;
  min-height: 210px;
  margin: 0 auto 30px;
  padding: 24px 38px 24px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 34px;
  background: linear-gradient(90deg, #4a0715 0%, #7a1730 48%, #a34058 100%);
  color: #fff;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.ai-content-feature:hover,
.ai-content-feature:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 30px 54px rgba(0, 0, 0, .32),
    0 16px 30px rgba(90, 15, 31, .4);
}

.ai-content-feature:focus-visible {
  outline: 4px solid #ffd75a;
  outline-offset: 5px;
}

.ai-content-illustration {
  display: grid;
  place-items: center;
}

.ai-content-illustration svg {
  display: block;
  width: 100%;
  max-width: 180px;
  filter: drop-shadow(0 14px 14px rgba(35, 3, 12, .34));
}

.ai-page { fill: #fff8ed; }
.ai-page-fold { fill: none; stroke: #f0c3b2; stroke-width: 5; stroke-linejoin: round; }
.ai-line { fill: none; stroke: #9b3150; stroke-width: 6; stroke-linecap: round; }
.ai-magic { fill: #ffd75a; stroke: #fff4c2; stroke-width: 4; }
.ai-magic-mark { fill: none; stroke: #5c1024; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ai-spark { fill: none; stroke: #ffd75a; stroke-width: 7; stroke-linecap: round; }

.ai-content-feature-copy {
  min-width: 0;
}

.ai-content-feature-copy > span,
.ai-content-intro > span {
  color: #ffe29a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ai-content-feature h3 {
  margin: 5px 0 7px;
  color: #fff;
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.045em;
  text-shadow: 0 3px 10px rgba(33, 2, 11, .28);
}

.ai-content-feature p {
  margin: 0;
  color: #fff5f1;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  text-shadow: 0 2px 7px rgba(33, 2, 11, .24);
}

.ai-content-launcher {
  min-width: 210px;
  min-height: 58px;
  border: 1px solid rgba(255, 243, 187, .8);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffd75a 0%, #f4b928 100%);
  box-shadow: 0 10px 22px rgba(48, 5, 18, .28), 0 0 18px rgba(255, 215, 90, .18);
  color: #4a0715;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ai-content-launcher:hover,
.ai-content-launcher:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 15px 28px rgba(48, 5, 18, .34), 0 0 24px rgba(255, 215, 90, .3);
  filter: brightness(1.04);
}

.ai-content-launcher:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

.ai-content-dialog {
  width: min(1080px, calc(100% - 32px));
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(29, 8, 14, .35);
}

.ai-content-dialog::backdrop {
  background: rgba(29, 8, 14, .66);
  backdrop-filter: blur(5px);
}

.ai-content-dialog-body {
  padding: clamp(28px, 5vw, 56px);
}

.ai-content-close {
  position: sticky;
  top: 18px;
  z-index: 3;
  float: right;
  width: 44px;
  height: 44px;
  margin: 18px 18px -62px 0;
  border: 1px solid rgba(83, 16, 32, .16);
  border-radius: 50%;
  background: #fff;
  color: var(--wine);
  font-size: 28px;
  cursor: pointer;
}

.ai-content-intro h2 {
  margin: 6px 0 10px;
  color: var(--green-900);
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -.05em;
}

.ai-content-intro p {
  max-width: 720px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
}

.ai-content-form label,
.ai-change-request {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ai-content-form label > span,
.ai-content-options legend,
.ai-change-request > span {
  color: var(--green-900);
  font-size: 14px;
  font-weight: 900;
}

.ai-content-form input,
.ai-content-form select,
.ai-content-form textarea,
.ai-change-request textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #d7dfd5;
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.ai-prompt-field textarea {
  min-height: 142px;
  border: 2px solid rgba(122, 23, 48, .34);
  background: #fffafa;
  font-size: 18px;
  line-height: 1.5;
}

.ai-content-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  margin-top: 22px;
}

.ai-content-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--green-100);
}

.ai-content-options label {
  flex-direction: row;
  align-items: center;
}

.ai-content-options input {
  width: 20px;
  min-height: 20px;
}

.ai-school-header-upload {
  display: grid;
  gap: 16px;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fffaf7;
}

.ai-school-header-upload h3 {
  margin: 0 0 4px;
  color: var(--green-900);
  font-size: 20px;
}

.ai-school-header-upload p {
  margin: 0;
  color: var(--muted);
}

.ai-header-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ai-header-select {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  cursor: pointer;
}

.ai-header-file-preview {
  padding: 16px;
  border: 1px solid #e2d8d3;
  border-radius: 14px;
  background: #fff;
}

.ai-header-file-preview strong {
  display: block;
  overflow-wrap: anywhere;
}

.ai-header-file-preview img {
  display: block;
  width: min(100%, 620px);
  max-height: 180px;
  margin-top: 14px;
  object-fit: contain;
  object-position: left center;
}

.ai-header-file-preview p {
  margin-top: 10px;
  color: var(--green-700);
  font-weight: 800;
}

.ai-use-header-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  color: var(--green-900);
  font-weight: 800;
}

.ai-use-header-option input {
  width: 20px;
  min-height: 20px;
}

.ai-create-submit {
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  font-size: 18px;
}

.ai-preview-status {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-weight: 900;
}

.ai-preview-document {
  min-height: 480px;
  padding: clamp(24px, 5vw, 54px);
  border: 1px solid #d8ddd8;
  border-radius: 18px;
  background: #fff;
  color: #17251f;
  box-shadow: 0 12px 34px rgba(30, 58, 45, .10);
}

.ai-preview-document.is-editing {
  outline: 4px solid rgba(122, 23, 48, .18);
}

.generated-school-header {
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid #313b35;
}

.generated-standard-header strong {
  display: block;
  margin-bottom: 8px;
}

.generated-standard-header div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.generated-school-header img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.generated-school-header-pdf {
  text-align: center;
}

.generated-school-header-pdf strong,
.generated-school-header-pdf span {
  display: block;
}

.generated-material > small {
  color: var(--wine);
  font-weight: 900;
  text-transform: uppercase;
}

.generated-material h2 {
  margin: 8px 0 14px;
  color: var(--green-900);
}

.generated-questions li {
  margin: 10px 0;
}

.answer-lines {
  height: 30px;
  border-bottom: 1px solid #bbc4bd;
}

.generated-figure {
  margin: 10px 0;
  text-align: center;
}

.generated-figure img {
  display: block;
  width: min(100%, 620px);
  max-height: 120px;
  margin: auto;
}

.generated-figure figcaption {
  margin-top: 3px;
  color: #5c6961;
  font-size: 13px;
}

.generated-image-notice {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #d8b8a8;
  border-radius: 10px;
  background: #fff8f3;
  color: #783429;
  font-size: 14px;
}

.generated-answer-key-page {
  break-before: page;
  page-break-before: always;
}

.generated-activity-page {
  break-after: page;
  page-break-after: always;
}

@media print {
  @page { size: A4; margin: 8mm; }
  .ai-preview-document { padding: 0; border: 0; box-shadow: none; font-family: Arial, sans-serif; font-size: 10pt; line-height: 1.2; }
  .ai-preview-document .generated-school-header { margin-bottom: 8px; padding-bottom: 6px; }
  .ai-preview-document .generated-material h2 { margin: 6px 0; }
  .ai-preview-document .generated-material p { margin: 5px 0; }
  .ai-preview-document .generated-questions { margin: 6px 0; }
  .ai-preview-document .generated-questions li { margin: 5px 0; }
  .ai-preview-document .answer-lines { height: 23px; }
  .ai-preview-document .generated-figure { margin: 6px 0; }
  .ai-preview-document .generated-figure img { max-height: 55px; }
  .ai-preview-document .generated-answer-key-page { break-before: page; page-break-before: always; }
}

.generated-figure {
  text-align: center;
}

.generated-answer-key,
.generated-adapted,
.generated-adjustment {
  margin-top: 28px;
  padding: 20px;
  border-radius: 14px;
  background: var(--green-100);
}

.generated-adjustment {
  background: #fff4ef;
  color: var(--wine-dark);
}

.ai-change-request {
  margin-top: 22px;
}

.ai-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 820px) {
  .ai-content-feature {
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 24px;
  }

  .ai-content-launcher {
    width: min(100%, 320px);
    grid-column: 2;
  }

  .ai-content-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .ai-content-dialog {
    width: calc(100% - 16px);
    border-radius: 20px;
  }

  .ai-content-dialog-body {
    padding: 26px 18px;
  }

  .ai-content-feature {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 0;
    padding: 24px 20px;
    text-align: center;
  }

  .ai-content-illustration svg {
    max-width: 130px;
  }

  .ai-content-launcher {
    width: 100%;
    grid-column: 1;
  }

  .ai-content-form-grid {
    grid-template-columns: 1fr;
  }

  .ai-content-options {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-preview-actions .btn {
    width: 100%;
  }
}

.home-library-highlight {
  border-color: rgba(255, 255, 255, .7);
  background: linear-gradient(90deg, #4a0715 0%, #7a1730 48%, #a34058 100%);
}

.home-library-highlight strong,
.home-library-copy > span {
  color: #fff;
}

/* TEACHEASY HERO PROFESSORA - POSICAO FINAL */
@media (min-width: 901px) {

  .slide:first-child .slide-overlay-teacher {
    top: 50%;
    left: clamp(58px, 6vw, 96px);
    right: auto;
    width: min(370px, 29vw);
    max-width: 370px;
    padding: 0;
    transform: translateY(-50%);
    color: #000;
    text-align: left;
    text-shadow: none;
  }

  .slide:first-child .slide-overlay-teacher h2 {
    max-width: 360px;
    font-size: clamp(34px, 3vw, 50px);
    line-height: 1;
  }

  .slide:first-child .slide-overlay-teacher p {
    max-width: 350px;
    font-size: clamp(17px, 1.45vw, 21px);
  }

  .slide:first-child .slide-overlay-teacher .slide-support {
    max-width: 350px;
    font-size: clamp(14px, 1.15vw, 17px);
  }
}
/* FIM TEACHEASY HERO PROFESSORA */

/* HIGHLIGHT JOGOS PEDAGÓGICOS (HOME) */
.home-coloring-highlight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr auto;
  align-items: center;
  width: 100%;
  margin: 0;
  min-height: 210px;
  padding: 24px 38px;
  gap: 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 44px;
  background: linear-gradient(135deg, #dff4e8, #a8d9bd 58%, #74ae8d);
  color: #193e2a;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-coloring-highlight::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 40px;
}

.home-coloring-highlight:hover,
.home-coloring-highlight:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 28px 44px rgba(47, 71, 54, .26),
    0 10px 20px rgba(35, 54, 41, .18),
    0 0 34px rgba(86, 150, 111, .22);
}

.home-coloring-highlight:focus-visible {
  outline: 4px solid rgba(47, 109, 74, .38);
  outline-offset: 5px;
}

.home-coloring-illustration,
.home-coloring-copy,
.home-coloring-arrow {
  position: relative;
  z-index: 1;
}

.home-coloring-illustration {
  display: grid;
  width: min(100%, 128px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(47, 109, 74, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 12px 20px rgba(44, 100, 68, .18);
  font-size: clamp(54px, 6vw, 78px);
}

.home-coloring-copy {
  display: grid;
  gap: 12px;
}

.home-coloring-copy strong {
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
}

.home-coloring-copy > span {
  max-width: 760px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
}

.home-coloring-arrow {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .74);
  color: #7a1730;
  font-size: 30px;
  font-weight: 800;
  transition: transform .2s ease;
}

.home-coloring-highlight:hover .home-coloring-arrow { transform: translateX(6px); }

@media (max-width: 680px) {
  .home-coloring-highlight {
    min-height: 148px;
    padding: 18px 16px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    border-radius: 28px;
  }
  .home-coloring-highlight::after { border-radius: 24px; }
  .home-coloring-illustration { width: 72px; font-size: 40px; }
  .home-coloring-copy { min-width: 0; gap: 7px; }
  .home-coloring-copy strong { font-size: clamp(24px, 7vw, 32px); }
  .home-coloring-copy > span { font-size: 15px; line-height: 1.35; }
  .home-coloring-arrow { width: 38px; height: 38px; font-size: 23px; }
}

.home-games-highlight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  align-items: center;
  width: 100%;
  margin: 0 0 30px;
  min-height: 210px;
  padding: 24px 38px;
  gap: 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 44px;
  background: linear-gradient(135deg, #2f4736, #56705a 60%, #7e9880);
  color: #fff;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-games-highlight::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 40px;
}

.home-games-highlight:hover,
.home-games-highlight:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 28px 44px rgba(47, 71, 54, .36),
    0 10px 20px rgba(35, 54, 41, .25),
    0 0 34px rgba(86, 112, 90, .26);
}

.home-games-highlight:focus-visible {
  outline: 4px solid rgba(86, 112, 90, .30);
  outline-offset: 5px;
}

.home-games-illustration {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.home-games-illustration svg {
  display: block;
  width: 100%;
  max-width: 170px;
  filter: drop-shadow(0 12px 12px rgba(18, 30, 22, .30));
}

.games-card-back { fill: #fcebd9; stroke: rgba(255,255,255,.6); stroke-width: 3; }
.games-card-front { fill: #ffffff; stroke: #2a9d8f; stroke-width: 4; }
.games-star-center { fill: #ffb703; }
.games-star-icon { fill: #ffffff; }
.games-check { fill: #fff; stroke: #94d2bd; stroke-width: 4; }
.games-check-mark { fill: none; stroke: #2a9d8f; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.games-spark { fill: none; stroke: #ffd96a; stroke-width: 7; stroke-linecap: round; }

.home-games-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.home-games-highlight strong {
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 3px 10px rgba(18, 30, 22, .28);
}

.home-games-copy > span {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 2px 7px rgba(18, 30, 22, .24);
}

@media (max-width: 680px) {
  .home-games-highlight {
    width: 100%;
    min-height: 148px;
    gap: 14px;
    border-radius: 28px;
  }
  .home-games-highlight::after { border-radius: 24px; }
  .home-games-illustration svg { max-width: 82px; }
  .home-games-highlight strong { font-size: clamp(24px, 7vw, 32px); }
  .home-games-copy { gap: 7px; }
  .home-games-copy > span { font-size: 15px; line-height: 1.35; }
}