/* ==========================================================================
   SUPERDATA - RESPONSIVE
   Breakpoints portados fielmente do global.css do ProcessWire (mobile-first:
   estilos base já são mobile; aqui aplicamos as melhorias progressivas).
   ========================================================================== */

/* Tablet 768px */
@media (min-width: 768px) {
  .pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pillar-gap);
    width: 100%;
    max-width: min(100%, calc(var(--pillar-w) * 2 + var(--pillar-gap)));
    justify-content: center;
  }

  .pillar-card {
    width: 100%;
    min-height: var(--pillar-h);
  }

}

/* Desktop 900px */
@media (min-width: 900px) {
  .site-header {
    height: var(--header-height-desktop);
    min-height: var(--header-height-desktop);
  }

  .header-shell {
    width: auto;
    max-width: calc(var(--header-nav-width) + var(--header-logo-size) - 3.5rem);
    align-items: center;
  }

  .header-logo {
    flex: 0 0 var(--header-logo-size);
    width: var(--header-logo-size);
    height: var(--header-logo-size);
    margin-right: -4.9rem;
  }

  .header-logo-circle {
    inset: -6px;
  }

  .header-nav {
    flex: 0 0 auto;
    width: min(var(--header-nav-width), calc(100vw - var(--header-logo-size) - 3rem));
    height: var(--header-capsule-h);
    margin-left: -4.9rem;
    padding: 0 2rem 0 7.4rem;
  }

  .header-nav-links {
    display: flex;
    position: static;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .header-nav-links a {
    padding: 0.35rem 0.5rem;
    font-size: clamp(17px, 1.15vw, var(--header-nav-font-size));
    letter-spacing: 0.02em;
  }

  .header-shell.is-open .header-nav-links {
    position: static;
    flex-direction: row;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .header-shell.is-open .header-nav-links a {
    padding: 0.35rem 0.5rem;
    text-align: center;
  }

  .header-shell.is-open .header-nav-links a:hover,
  .header-shell.is-open .header-nav-links a:focus-visible {
    background: transparent;
    opacity: 0.75;
  }

  .header-menu-toggle {
    display: none;
  }

  /* Elementos injetados apenas para o sidebar mobile — ocultos no desktop */
  .sidebar-brand,
  .sidebar-footer {
    display: none !important;
  }

  /* --- Hero pixel-perfect (Figma frame "home" 1920×1075) --- */
  .hero-scaler {
    width: calc(var(--hero-canvas-w) * var(--hero-scale));
    max-width: 100%;
    height: calc(var(--hero-canvas-h) * var(--hero-scale));
    margin-inline: auto;
  }

  .hero-stage {
    width: var(--hero-canvas-w);
    height: var(--hero-canvas-h);
    transform: scale(var(--hero-scale));
    transform-origin: top left;
  }

  .hero-bg-pattern,
  .hero-decor,
  .hero-glow-media,
  .hero-glow-left,
  .hero-shape {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  .hero-bg-pattern {
    left: var(--hero-bg-pattern-x);
    top: var(--hero-bg-pattern-y);
    width: var(--hero-bg-pattern-w);
    height: var(--hero-bg-pattern-h);
    object-fit: fill;
    z-index: 0;
  }

  .hero-decor--left {
    left: var(--hero-decor-left-x);
    top: var(--hero-decor-left-y);
    width: var(--hero-decor-left-w);
    height: var(--hero-decor-left-h);
    object-fit: fill;
    z-index: 3;
  }

  .hero-decor--right {
    left: var(--hero-decor-right-x);
    top: var(--hero-decor-right-y);
    width: var(--hero-decor-right-w);
    height: var(--hero-decor-right-h);
    object-fit: fill;
    z-index: 1;
  }

  .hero-glow-media {
    left: var(--hero-glow-media-x);
    top: var(--hero-glow-media-y);
    width: var(--hero-glow-media-w);
    height: var(--hero-glow-media-h);
    border-radius: 50%;
    background: var(--hero-glow-media-color);
    filter: blur(var(--hero-glow-media-blur));
    z-index: 2;
  }

  .hero-glow-left {
    left: var(--hero-glow-left-x);
    top: var(--hero-glow-left-y);
    width: var(--hero-glow-left-w);
    height: var(--hero-glow-left-h);
    border-radius: 50%;
    background: var(--hero-glow-left-color);
    filter: blur(var(--hero-glow-left-blur));
    z-index: 9;
  }

  .hero-logo {
    position: absolute;
    left: var(--hero-logo-x);
    top: var(--hero-logo-y);
    width: var(--hero-logo-w);
    height: var(--hero-logo-h);
    margin: 0;
    object-fit: contain;
    z-index: 4;
  }

  .hero-headline {
    position: absolute;
    left: var(--hero-h1-x);
    top: var(--hero-h1-y);
    width: var(--hero-h1-w);
    height: var(--hero-h1-h);
    margin: 0;
    font-family: "Anton", sans-serif;
    font-size: var(--hero-h1-size);
    line-height: var(--hero-h1-lh);
    font-weight: 400;
    color: var(--sd-blue);
    text-transform: uppercase;
    z-index: 5;
  }

  .hero-subtitle {
    position: absolute;
    left: var(--hero-subtitle-x);
    top: var(--hero-subtitle-y);
    width: var(--hero-subtitle-w);
    height: var(--hero-subtitle-h);
    margin: 0;
    font-family: "Amaranth", sans-serif;
    font-size: var(--hero-subtitle-size);
    line-height: var(--hero-subtitle-lh);
    font-weight: 400;
    color: var(--sd-blue);
    z-index: 6;
  }

  .hero-shape {
    left: var(--hero-shape-x);
    top: var(--hero-shape-y);
    width: var(--hero-shape-w);
    height: var(--hero-shape-h);
    border-radius: var(--hero-shape-radius);
    background: var(--hero-shape-color);
    z-index: 7;
  }

  .hero-image {
    position: absolute;
    left: var(--hero-img-x);
    top: var(--hero-img-y);
    width: var(--hero-img-w);
    height: var(--hero-img-h);
    margin: 0;
    object-fit: contain;
    object-position: left top;
    z-index: 8;
  }

  .hero-description {
    position: absolute;
    left: var(--hero-body-x);
    top: var(--hero-body-y);
    width: var(--hero-body-w);
    height: var(--hero-body-h);
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: var(--hero-body-size);
    line-height: var(--hero-body-lh);
    font-weight: 400;
    letter-spacing: 0;
    color: #000000;
    z-index: 10;
  }

  .hero-cta {
    position: absolute;
    left: var(--hero-cta-x);
    top: var(--hero-cta-y);
    width: var(--hero-cta-w);
    max-width: var(--hero-cta-w);
    height: var(--hero-cta-h);
    min-height: var(--hero-cta-h);
    margin: 0;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-family: "Poppins", sans-serif;
    font-size: var(--hero-cta-text-size);
    line-height: var(--hero-cta-text-lh);
    letter-spacing: -0.02em;
    font-weight: 700;
    text-align: left;
    border-radius: var(--hero-cta-radius);
    box-shadow: var(--shadow-cta);
    background: var(--sd-red);
    z-index: 11;
  }

  .stats-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 220px;
    margin: 0;
    padding: 48px 0 42px;
    background: #004dff;
    opacity: 1;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .stats-list {
    position: relative;
    max-width: 980px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 90px;
    align-items: center;
    justify-items: center;
  }

  .stats-item {
    position: static;
    transform: none;
    width: auto;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .stats-item img,
  .stats-item p {
    position: static;
    margin: 0;
  }

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

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

  .pre-card {
    padding: var(--pre-card-pt) var(--pre-card-px) 2rem;
    margin-inline: auto;
    width: 100%;
    max-width: var(--pre-card-w);
  }

  .pre-card h2 {
    font-size: 2.75rem;
    line-height: 1;
  }

  .pre-form {
    margin-top: var(--pre-title-field-gap);
  }

  .pre-field + .pre-field {
    margin-top: var(--pre-field-gap-y);
  }

  .pre-field {
    gap: var(--pre-field-gap);
  }

  .pre-form button {
    justify-self: end;
    min-width: var(--pre-btn-w);
    min-height: var(--pre-btn-h);
    margin-top: var(--pre-btn-mt);
    font-size: 1.1rem;
  }

  .contact-inner {
    grid-template-columns: var(--contact-info-w) var(--contact-map-w);
    gap: var(--contact-gap);
    align-items: start;
    justify-content: center;
  }

  .contact-map-card {
    min-height: var(--contact-map-h);
  }
}

@media (min-width: 768px) {
  .stats-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 90px;
  }

  .stats-strip {
    padding: 48px 0 42px;
  }

  .stats-item p {
    font-size: 18px;
  }
}

@media (max-width: 899px) {
  section.pillars,
  .pillars {
    padding: 24px 0 36px;
  }

  .pillars__header {
    margin-bottom: 24px;
  }

  .pillar-card {
    min-height: auto;
    padding: 20px 14px 18px;
  }

  .stats-strip {
    position: relative;
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding: 42px 20px;
  }

  .hero-cta {
    max-width: 100%;
  }

  .site-footer {
    position: static;
    transform: none;
    width: auto;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
  }

  .pre-card {
    padding: 1.5rem 1rem;
    margin-inline: auto;
    margin-left: auto;
    width: auto;
  }

  .pre-card h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    max-width: none;
  }

  .pre-form {
    margin-top: 1rem;
  }

  .pre-field + .pre-field {
    margin-top: 0.75rem;
  }

  .pre-field {
    gap: 0.35rem;
  }

  .pre-form button {
    width: 100%;
    justify-self: stretch;
    min-height: 64px;
    margin-top: 0.5rem;
    font-size: 1rem;
  }

  .about,
  #quem-somos {
    padding: 72px 0 64px;
    scroll-margin-top: calc(var(--header-height-mobile) + 12px);
  }

  .about__inner {
    gap: 28px;
  }

  .about__pattern-left {
    display: block;
    position: absolute; /* evita contribuição ao fluxo */
    left: -150px;
    top: 24px;
    width: 300px;
    height: 300px;
    opacity: 0.3;
  }

  .about__pattern-right {
    display: block;
    position: absolute; /* evita contribuição ao fluxo */
    right: -130px;
    top: 220px;
    width: 300px;
    height: 300px;
    opacity: 0.25;
  }

  .about__content,
  .about__body {
    padding-left: 0;
  }

  .about__logo {
    width: 130px;
    margin: 0 0 28px;
  }

  .about__title {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.18;
    margin-bottom: 24px;
  }

  .about__lead,
  .about__text {
    max-width: 100%;
    font-size: 22px;
    line-height: 1.2;
  }

  .about__lead {
    margin-bottom: 24px;
  }

  .about__red-blur {
    width: 280px;
    height: 280px;
    left: auto;
    top: auto;
    right: -60px;
    bottom: 40px;
    opacity: 0.38;
  }

  .about__image-wrap {
    max-width: 100%;
    margin: 0 0 36px;
  }

  .about__image-wrap img {
    min-height: 0;
    max-height: none;
  }

  .about__body {
    margin-top: 0;
  }

  .about__body p {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: 0;
  }

}

@media (min-width: 900px) {
  .pillars__title {
    font-size: 40px;
  }

  .pillars__subtitle {
    font-size: 32px;
  }

  .pillars__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pillar-gap);
    width: 100%;
    max-width: 100%;
    margin-top: var(--pillars-cards-mt);
  }

  .pillar-card {
    width: 100%;
    min-height: var(--pillar-h);
  }
}

@media (max-width: 768px) {
  .hero-cta {
    width: 100%;
    max-width: 320px;
    padding: 13px 24px 15px;
    font-size: 1.45rem;
    text-align: left;
    justify-content: flex-start;
  }

  .about__pattern-left {
    position: absolute;
    left: -150px;
    top: 24px;
    width: 300px;
    height: 300px;
    opacity: .3;
  }

  .about__pattern-right {
    position: absolute;
    right: -130px;
    top: 220px;
    width: 300px;
    height: 300px;
    opacity: .3;
  }
}

/* ==========================================================================
   REFINAMENTO MOBILE COMPLETO — 2026-07-08
   Aplica-se sobre todos os estilos acima.
   Breakpoints-alvo:
     ≤ 767px  → qualquer smartphone (iPhone 14 Pro 393px, Pixel 7 Pro 480px…)
     ≤ 399px  → smartphones compactos
   ========================================================================== */

/* ---------- Hero: proporções mobile (fundo branco, texto azul, centrado) ---------- */
@media (max-width: 767px) {
  .hero-logo {
    width: min(150px, 39vw);
    margin: 1.5rem auto 0.75rem;
  }

  .hero-headline {
    font-size: clamp(1.75rem, 8.2vw, 2.25rem);
    line-height: 1.18;
    color: var(--sd-blue);
    text-align: center;
    margin: 0 1rem;
  }

  .hero-subtitle {
    font-size: clamp(0.9rem, 3.8vw, 1.1rem);
    line-height: 1.55;
    color: var(--sd-blue);
    text-align: center;
    margin: 0.6rem 1rem 0;
  }

  .hero-image {
    width: min(100%, 380px);
    margin: 1.25rem auto 0;
  }

  .hero-description {
    font-size: clamp(0.875rem, 3.3vw, 1rem);
    line-height: 1.6;
    color: var(--sd-text);
    text-align: center;
    margin: 1rem 1rem 0;
  }

  .hero-cta {
    display: flex;
    width: calc(100% - 2rem);
    max-width: 400px;
    margin: 1rem auto 1.5rem;
    font-size: clamp(1rem, 4.5vw, 1.2rem);
    min-height: 56px;
    padding: 14px 20px;
    justify-content: center;
    text-align: center;
    border-radius: 16px;
  }
}

/* ---------- Stats: 3 colunas compactas em mobile ---------- */
@media (max-width: 767px) {
  .stats-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .stats-strip {
    padding: 28px 14px;
  }

  .stats-item img {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }

  .stats-item p {
    font-size: 11px;
    line-height: 1.25;
  }
}

/* ---------- Pilares: altura automática + espaçamento compacto ---------- */
@media (max-width: 767px) {
  section.pillars,
  .pillars {
    padding: 28px 0 32px;
  }

  .pillars__header {
    margin-bottom: 20px;
  }

  .pillars__grid {
    gap: 14px;
  }

  .pillar-card {
    min-height: 0;
    padding: 20px 16px 18px;
  }

  .pillar-card__icon {
    width: 60px;
    height: 60px;
  }

  .pillar-card__title {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .pillar-card__text {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* ---------- Cursos: fontes e espaçamento mobile ---------- */
@media (max-width: 767px) {
  .courses {
    padding: 36px 0 48px;
  }

  .courses-hero-intro,
  .courses-header {
    gap: 16px;
    margin-bottom: 24px;
  }

  /* Esconde as imagens decorativas laterais no mobile; centraliza só o texto */
  .courses-intro-media.courses-intro-media--left,
  .courses-intro-media.courses-intro-media--right {
    display: none;
  }

  .courses-hero-intro h2,
  .courses-intro-content h2 {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
    line-height: 1.15;
  }

  .courses-hero-intro p,
  .courses-intro-content p {
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    line-height: 1.3;
  }

  .courses-category-title,
  .course-category h3 {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
    line-height: 1.15;
    margin-bottom: 16px;
  }
}

/* ---------- Quem Somos / About: tipografia refinada mobile ---------- */
@media (max-width: 767px) {
  /* Garante que divs decorativas nunca ocupem espaço no fluxo em mobile */
  .about__pattern-left,
  .about__pattern-right {
    display: none;
  }

  .about,
  #quem-somos {
    padding: 48px 0 40px;
  }

  /* Mesma lógica do hero: tudo centralizado no mobile */
  .about__logo {
    width: min(115px, 32vw);
    margin: 0 auto 12px;
    display: block;
  }

  .about__title {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    line-height: 1.18;
    margin-bottom: 14px;
    max-width: 100%;
    text-align: center;
  }

  .about__lead,
  .about__text {
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
    line-height: 1.58;
    max-width: 100%;
    text-align: center;
  }

  .about__lead {
    margin-bottom: 12px;
  }

  .about__body {
    text-align: center;
  }

  .about__body p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
    max-width: 100%;
    text-align: center;
  }

  .about__image-wrap {
    max-width: 340px;
    margin-inline: auto;
  }

  .about__red-blur {
    width: 220px;
    height: 220px;
    right: -40px;
    bottom: 20px;
    opacity: 0.3;
  }
}

/* ---------- Pré-matrícula: compacto mobile ---------- */
@media (max-width: 767px) {
  .pre-registration {
    padding: 2rem 0;
  }

  .pre-card {
    border-radius: 18px;
  }

  .pre-card h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.65rem);
  }
}

/* ---------- Contato: mobile ---------- */
@media (max-width: 767px) {
  #contato.contact {
    padding: 3rem 0 3.5rem !important;
  }

  #contato-title,
  #contato.contact h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important;
    margin-bottom: 24px !important;
  }

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

/* ---------- Mobile compacto ≤ 399px ---------- */
@media (max-width: 399px) {
  .hero-logo {
    width: min(135px, 38vw);
  }

  .hero-headline {
    font-size: clamp(1.6rem, 8.8vw, 1.9rem);
  }

  .stats-item img {
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
  }

  .stats-item p {
    font-size: 10px;
  }

  .stats-list {
    gap: 6px;
  }

  .about__title {
    font-size: clamp(1.5rem, 8.2vw, 1.85rem);
  }
}

/* ==========================================================================
   TABLET 768–899px — refino de alinhamento (iPad Air 820px e similares)
   Preenche o gap entre mobile (≤767) e desktop (≥900).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 899px) {
  /* --- Header: cápsula centralizada com respiro lateral --- */
  .site-header {
    height: var(--header-height-tablet);
    min-height: var(--header-height-tablet);
  }

  .header-shell {
    width: min(740px, calc(100vw - 48px));
    max-width: none;
  }

  .header-logo {
    flex: 0 0 var(--header-logo-size-tablet);
    width: var(--header-logo-size-tablet);
    height: var(--header-logo-size-tablet);
    margin-right: -3.35rem;
  }

  .header-nav {
    height: 62px;
    margin-left: -2rem;
    padding: 0 3.5rem 0 4.35rem;
  }

  .header-menu-toggle {
    right: 1rem;
  }

  /* --- Hero: logo proporcional + texto centralizado --- */
  .hero-logo {
    width: min(220px, 30vw);
    margin: 1.75rem auto 1rem;
  }

  .hero-headline {
    max-width: 640px;
    margin-inline: auto;
    padding: 0 2rem;
    text-align: center;
    font-size: clamp(2rem, 4.2vw, 2.6rem);
    line-height: 1.15;
  }

  .hero-subtitle {
    max-width: 580px;
    margin: 0.85rem auto 0;
    padding: 0 2rem;
    text-align: center;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.45;
  }

  .hero-description {
    max-width: 560px;
    margin: 1.25rem auto 0;
    padding: 0 2rem;
    text-align: center;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.55;
  }

  .hero-image {
    width: min(480px, 68vw);
    margin: 1.5rem auto 0;
  }

  .hero-cta {
    display: flex;
    max-width: 400px;
    margin: 1.25rem auto 2rem;
    justify-content: center;
    text-align: center;
  }

  /* --- Stats: mais respiro em tablet --- */
  .stats-strip {
    padding: 36px 28px;
  }

  .stats-item img {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
  }

  .stats-item p {
    font-size: 14px;
    line-height: 1.3;
  }

  /* --- Quem Somos: centralizado como mobile --- */
  .about,
  #quem-somos {
    scroll-margin-top: calc(var(--header-height-tablet) + 12px);
  }

  .about__logo {
    width: min(140px, 22vw);
    margin: 0 auto 20px;
    display: block;
  }

  .about__title {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(2rem, 4vw, 2.4rem);
  }

  .about__lead,
  .about__text {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
  }

  .about__body {
    text-align: center;
  }

  .about__body p {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
  }

  .about__image-wrap {
    max-width: 420px;
    margin-inline: auto;
  }
}