/* ==========================================================================
   SUPERDATA - HOME
   Hero, faixa de estatísticas, pilares, cursos, quem somos, pré-matrícula,
   contato. Portado fielmente do global.css do ProcessWire.
   ========================================================================== */

/* --- Hero + stats (Figma frame "home" 1920×1075) --- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sd-white);
  padding: 0;
}

.hero-scaler {
  width: 100%;
  height: auto;
}

.hero-stage {
  position: relative;
  width: 100%;
  height: auto;
}

/* Mobile / tablet: stack simplificado (frame Figma mobile em sprint futuro) */
.hero-bg-pattern,
.hero-decor,
.hero-glow-media,
.hero-glow-left,
.hero-shape {
  display: none;
}

.hero-logo,
.hero-headline,
.hero-subtitle,
.hero-description,
.hero-image,
.hero-cta {
  position: relative;
  z-index: 2;
}

.hero-logo {
  display: block;
  width: min(var(--hero-logo-w), 78vw);
  height: auto;
  margin: 1rem auto 1rem;
}

.hero-headline {
  margin: 0 1rem;
  line-height: 0.905;
  font-family: "Anton", sans-serif;
  font-size: clamp(1.85rem, 5.2vw, 2.5rem);
  color: var(--sd-blue);
  text-transform: uppercase;
}

.hero-subtitle {
  margin: 0.75rem 1rem 0;
  font-family: "Amaranth", sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  color: var(--sd-blue);
}

.hero-description {
  margin: 1rem 1rem 0;
  line-height: 1.333;
  font-size: clamp(0.95rem, 1.8vw, 1.125rem);
  letter-spacing: 0.03125em;
  color: var(--sd-text);
}

.hero-image {
  display: block;
  width: min(100%, var(--hero-img-w));
  height: auto;
  margin: 1.5rem auto 0;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 2rem);
  max-width: 360px;
  min-height: 52px;
  margin: 1.25rem 1rem 0;
  padding: 14px 30px 16px 30px;
  background: var(--sd-red);
  color: var(--sd-white);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
  border-radius: 20px;
  box-shadow: var(--shadow-cta);
}

.stats-strip {
  position: relative;
  width: 100%;
  background: #004dff;
  opacity: 1;
  padding: 42px 20px;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-list {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  justify-items: center;
}

.stats-item {
  text-align: center;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.stats-item img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  margin-bottom: 22px;
}

.stats-item p {
  margin: 0;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  text-shadow: none;
}

/* --- Pilares --- */
section.pillars,
.pillars {
  background: #ffffff !important;
  padding: var(--pillars-pt) 0 var(--pillars-pb);
  margin: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.pillars__header {
  max-width: 100%;
  margin: 0 auto var(--pillars-header-mb);
  text-align: center;
}

.pillars__title {
  max-width: var(--pillar-title-w);
  margin: 0 auto 6px;
  color: #d60000;
  font-family: "Anton", sans-serif;
  font-size: clamp(1.625rem, 4.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.363;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.pillars__subtitle {
  max-width: var(--pillar-subtitle-w);
  margin: 0 auto;
  color: #0052ff;
  font-family: "Amaranth", sans-serif;
  font-size: clamp(1.125rem, 3.2vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
  text-align: center;
}

.pillars__grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--pillars-grid-max-w);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pillar-gap);
  align-items: stretch;
  justify-content: center;
}

/* --- Cursos --- */
#cursos,
.courses {
  scroll-margin-top: 130px;
}

.courses {
  background: #ffffff !important;
  padding: var(--courses-pt) 0 var(--courses-pb);
  margin: 0;
  position: relative;
  overflow: visible;
}

.courses-hero-intro,
.courses-header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0 auto var(--course-intro-mb);
}

.courses-intro-media {
  position: relative;
  border-radius: 26px;
  overflow: visible;
  width: 100%;
  max-width: var(--course-intro-img-w);
  height: var(--course-intro-img-h);
  flex: 0 0 auto;
  margin: 0;
  justify-self: center;
}

.courses-intro-media::before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 34px;
  background: radial-gradient(circle, rgb(0 82 255) 0%, rgb(0 82 255 / 65%) 50%, rgb(0 82 255 / 0%) 72%);
  filter: blur(14px);
  z-index: 0;
  pointer-events: none;
}

.courses-hero-intro img,
.courses-hero-intro .course-intro-img,
.courses-intro-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-intro-img);
  opacity: 1;
  filter: none;
  box-shadow: none;
}

.courses-intro-content {
  text-align: center;
  max-width: var(--course-intro-title-w);
  margin-inline: auto;
}

.courses-hero-intro h2,
.courses-hero-intro .courses-title,
.courses-intro-content h2 {
  margin: 0 0 var(--course-intro-heading-to-sub);
  font-family: "Anton", var(--font-display, sans-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--course-intro-title-color);
  text-align: center;
  text-transform: none;
}

.courses-hero-intro p,
.courses-hero-intro .courses-subtitle,
.courses-intro-content p {
  margin: 0;
  font-family: "Amaranth", var(--font-body, sans-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--course-intro-subtitle-color);
  text-align: center;
}

.courses-categories {
  display: grid;
  gap: var(--course-category-gap-y);
}

.courses-category-title,
.course-category h3 {
  margin: 0 auto var(--course-category-title-mb);
  font-family: "Anton", var(--font-display, sans-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.363;
  color: #d60000;
  text-align: center;
}

.course-grid {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--course-grid-gap-y) var(--course-grid-gap-x);
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 981px) {
  .courses-hero-intro,
  .courses-header {
    width: 100%;
    grid-template-columns: var(--course-intro-img-w) 1fr var(--course-intro-img-w);
    gap: var(--course-intro-col-gap);
  }

  .courses-intro-content {
    max-width: 100%;
  }

  .courses-intro-media {
    width: var(--course-intro-img-w);
    max-width: var(--course-intro-img-w);
  }
}

/* AJUSTE DAS IMAGENS DECORATIVAS - SEÇÃO CURSOS */
@media (min-width: 981px) {
  .courses-intro-media.courses-intro-media--left,
  .courses-intro-media.courses-intro-media--right {
    width: 333px !important;
    max-width: 333px !important;
    height: 302px !important;
    flex: 0 0 333px !important;
  }

  .courses-intro-media.courses-intro-media--left img,
  .courses-intro-media.courses-intro-media--right img {
    width: 333px !important;
    height: 302px !important;
    object-fit: cover !important;
    display: block !important;
  }
}

@media (max-width: 980px) {
  .courses-hero-intro,
  .courses-header {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .courses-intro-media {
    margin-inline: auto;
  }

  .course-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 560px) {
  .courses {
    padding: 40px 0 56px;
  }

  .courses .container {
    width: min(100% - 28px, 420px);
  }

  .courses-hero-intro h2,
  .courses-hero-intro .courses-title,
  .courses-intro-content h2,
  .courses-category-title,
  .course-category h3 {
    font-size: 32px;
    line-height: 1.12;
  }

  .courses-hero-intro p,
  .courses-hero-intro .courses-subtitle,
  .courses-intro-content p {
    font-size: 24px;
    line-height: 1.18;
  }

  .courses-intro-media {
    width: 100%;
    max-width: 300px;
    height: 190px;
  }
}

/* --- Quem somos / About --- */
.about,
#quem-somos {
  position: relative;
  overflow: hidden;
  background: #ffffff !important;
  padding: 115px 0 90px;
  scroll-margin-top: 130px;
}

.about__pattern-left,
.about__pattern-right {
  display: none;
  pointer-events: none;
}

.about__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--about-inner-gap);
  align-items: start;
}

.about__content {
  position: relative;
  z-index: 3;
}

.about__logo {
  width: min(155px, 40vw);
  height: auto;
  display: block;
  margin: 0 0 18px;
}

.about__title {
  margin: 0 0 22px;
  max-width: var(--about-title-w);
  font-family: "Anton", sans-serif;
  font-size: clamp(2rem, 4vw, 48px);
  line-height: 1.314;
  font-weight: 400;
  letter-spacing: 0;
  color: #132951;
  text-transform: uppercase;
}

.about__lead {
  margin: 0 0 22px;
  max-width: var(--about-lead-w);
  font-family: "Amaranth", sans-serif;
  font-size: clamp(1.125rem, 2.5vw, 24px);
  line-height: 1.18;
  font-weight: 400;
  color: #0057ff;
}

.about__text {
  margin: 0;
  max-width: var(--about-lead-w);
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.5px;
  font-weight: 400;
  color: #000000;
}

.about__image-wrap {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: var(--about-img-w);
  border-radius: var(--radius-about-img);
  overflow: visible;
  z-index: 2;
}

.about__image-wrap img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-about-img);
}

.about__red-blur {
  position: absolute;
  left: var(--about-glow-x);
  top: var(--about-glow-y);
  width: var(--about-glow-size);
  height: var(--about-glow-size);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(214 0 0 / 70%) 0%,
    rgb(214 0 0 / 38%) 38%,
    rgb(214 0 0 / 12%) 62%,
    transparent 80%
  );
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}

.about__body {
  position: relative;
  z-index: 3;
  margin-top: 32px;
}

.about__body p {
  margin: 0 0 20px;
  max-width: var(--about-text-wide);
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0;
  font-weight: 400;
  color: #212d51;
}

.about__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .about__pattern-left,
  .about__pattern-right {
    display: block;
    position: absolute;
    width: 42%;
    max-width: 520px;
    height: 560px;
    z-index: 0;
  }

  .about__pattern-left {
    left: 0;
    top: 70px;
    background: url("../img/decorativos/quem-somos-decoracao-esquerda.png") center / contain no-repeat;
  }

  .about__pattern-right {
    right: 0;
    top: 55px;
    background: url("../img/decorativos/quem-somos-decoracao-direita.png") center / contain no-repeat;
  }

  .about__inner {
    grid-template-columns: minmax(0, 1fr) var(--about-img-w);
    gap: 48px;
    align-items: start;
  }

  .about__content {
    padding-left: var(--about-text-x);
  }

  .about__logo {
    width: 155px;
    margin-left: var(--about-logo-offset);
  }

  .about__image-wrap {
    margin-top: var(--about-media-mt);
    justify-self: end;
  }

  .about__image-wrap img {
    min-height: 360px;
    max-height: var(--about-img-h);
  }

  .about__body {
    padding-left: var(--about-text-x) !important;
  }
}

/* --- Pré-matrícula --- */
.pre-registration {
  padding: 3rem 0;
}

/* --- Contato + footer integrado --- */
.contact {
  position: relative;
  padding: 3rem 0 5rem;
}

.contact h2 {
  margin: 0;
  text-align: center;
  font-family: "Anton", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--sd-blue-dark);
  text-transform: uppercase;
}

.contact-inner {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

.contact-info {
  max-width: var(--contact-info-w);
}

.contact-info p {
  margin: 0;
  color: var(--sd-blue-dark);
  line-height: 1.5;
}

.contact-info p + p {
  margin-top: 3rem;
}

.contact-info a {
  color: var(--sd-blue);
  font-weight: 600;
}

.contact-info a:hover,
.contact-info a:focus-visible {
  text-decoration: underline;
}

/* =========================================================
   SUPERDATA - SEÇÃO CONTATO | AJUSTE FINAL FIGMA
   Referência Figma:
   - Título: Anton Regular 48px / #132951
   - Bloco texto esquerdo: Poppins 24px / #102655
   - Card mapa: 544x402px / bg #102655 / radius 30px
   ========================================================= */

#contato.contact {
  position: relative;
  background: #ffffff !important;
  padding: 5rem 0 5rem !important;
  margin: 0 !important;
  overflow: visible;
}

#contato .container {
  width: 100%;
  max-width: 1110px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

#contato-title,
#contato.contact h2 {
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 48px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #132951 !important;
  margin: 0 0 54px 0 !important;
  padding: 0 !important;
}

#contato .contact-inner {
  display: grid !important;
  grid-template-columns: 371px 544px !important;
  column-gap: 63px !important;
  align-items: start !important;
  justify-content: center !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
}

#contato .contact-info {
  width: 371px !important;
  min-height: 301px;
  margin: 0 !important;
  padding: 34px 0 0 0 !important;
  color: #102655 !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  text-align: left !important;
}

#contato .contact-info p,
#contato .contact-info div,
#contato .contact-info span,
#contato .contact-info a {
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: #102655 !important;
  text-decoration: none !important;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

#contato .contact-info strong,
#contato .contact-info b {
  font-weight: 700 !important;
  color: #102655 !important;
}

#contato .contact-info p {
  margin: 0 0 38px 0 !important;
}

#contato .contact-info p:last-child {
  margin-bottom: 0 !important;
}

#contato .contact-location,
#contato .location-card,
#contato .map-card,
#contato .contact-map,
#contato .contact-map-card {
  width: 544px !important;
  min-height: 402px !important;
  background: #102655 !important;
  border-radius: 30px !important;
  padding: 24px 32px 28px 32px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
  color: #ffffff !important;
}

#contato .contact-location h3,
#contato .location-card h3,
#contato .map-card h3,
#contato .contact-map h3,
#contato .contact-map-card h3,
#contato .contact-location .location-title,
#contato .location-card .location-title {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 36px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#contato .contact-location img,
#contato .location-card img,
#contato .map-card img,
#contato .contact-map img,
#contato .contact-map-card img,
#contato iframe {
  display: block !important;
  width: 482px !important;
  height: 144px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  margin: 0 0 24px 0 !important;
  border: 0 !important;
}

#contato .contact-location p,
#contato .location-card p,
#contato .map-card p,
#contato .contact-map p,
#contato .contact-map-card p,
#contato .contact-address,
#contato address {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 482px !important;
  text-align: left !important;
}

/* Pill WhatsApp flutuante (visual intacto em .footer-cta) */
#contato .site-footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

#contato .footer-cta,
#contato .site-footer .footer-cta,
#contato .site-footer a[href*="wa.me"],
#contato .site-footer a[href*="whatsapp"] {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  z-index: 9990 !important;
}

#contato .contact-info a[href*="wa.me"],
#contato .contact-info a[href*="whatsapp"] {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
}

/* RESPONSIVO */
@media (max-width: 1100px) {
  #contato .contact-inner {
    grid-template-columns: 1fr !important;
    row-gap: 40px !important;
    justify-items: center !important;
  }

  #contato .contact-info {
    width: min(100%, 544px) !important;
    padding-top: 0 !important;
  }

  #contato .contact-location,
  #contato .location-card,
  #contato .map-card,
  #contato .contact-map,
  #contato .contact-map-card {
    width: min(100%, 544px) !important;
  }
}

@media (max-width: 640px) {
  #contato.contact {
    padding: 4rem 0 !important;
  }

  #contato .container {
    padding: 0 20px;
  }

  #contato-title,
  #contato.contact h2 {
    font-size: 38px !important;
    margin-bottom: 36px !important;
  }

  #contato .contact-info,
  #contato .contact-info p,
  #contato .contact-info div,
  #contato .contact-info span,
  #contato .contact-info a {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  #contato .contact-info p {
    margin-bottom: 28px !important;
  }

  #contato .contact-location,
  #contato .location-card,
  #contato .map-card,
  #contato .contact-map,
  #contato .contact-map-card {
    min-height: auto !important;
    border-radius: 24px !important;
    padding: 22px !important;
  }

  #contato .contact-location h3,
  #contato .location-card h3,
  #contato .map-card h3,
  #contato .contact-map h3,
  #contato .contact-map-card h3 {
    font-size: 28px !important;
  }

  #contato .contact-location img,
  #contato .location-card img,
  #contato .map-card img,
  #contato .contact-map img,
  #contato .contact-map-card img,
  #contato iframe {
    width: 100% !important;
    height: 140px !important;
  }

  #contato .contact-location p,
  #contato .location-card p,
  #contato .map-card p,
  #contato .contact-map p,
  #contato .contact-map-card p,
  #contato .contact-address,
  #contato address {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  #contato .footer-cta,
  #contato .site-footer .footer-cta,
  #contato .site-footer a[href*="wa.me"],
  #contato .site-footer a[href*="whatsapp"] {
    right: 16px !important;
    bottom: 16px !important;
  }
}