/* ===================================================
   Uma História do Design — base styles
   =================================================== */

/* Ivar Text isn't a Google Font — it only renders on desktop because
   it happens to be installed as a system font there. Self-hosting it
   here is what makes it show up on mobile (and anywhere else it
   isn't installed). */

@font-face {
  font-family: "Ivar Text";
  src: url("Fonts/Ivar/IvarText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ivar Text";
  src: url("Fonts/Ivar/IvarText-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ivar Text";
  src: url("Fonts/Ivar/IvarText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ivar Text";
  src: url("Fonts/Ivar/IvarText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --gray-bg: #f2f2f2;
  --text: #1d1b20;
  --pill-text: #1e1e1e;
  --radius-btn: 8px;
  --container-width: 600px;
  --font-display: "Ivar Text", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid section spacing — 0 below ~900px viewport (mobile stays as
     tight as it already is), ramping up smoothly to a cap at ~1440px
     (the width of the Figma desktop frame) instead of snapping at a
     single breakpoint. Three tiers so a topic change (loose) reads as
     more of a break than a step within the same topic (tight). */
  --gap-tight: clamp(0px, 9vw - 81px, 48px);
  --gap-medium: clamp(0px, 12vw - 108px, 64px);
  --gap-loose: clamp(0px, 18vw - 162px, 96px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* Content-width columns (desktop values come from the Figma desktop
   frame — see the min-width: 1024px block at the bottom of this file) */

.col-wide,
.col-narrow {
  width: 100%;
}

/* Spacing utilities — see the --gap-* fluid tokens above */

.mt-tight {
  margin-top: var(--gap-tight);
}

.mt-medium {
  margin-top: var(--gap-medium);
}

.mt-loose {
  margin-top: var(--gap-loose);
}

/* Typography */

.display-lg,
.display-md {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  margin: 0;
}

.display-lg {
  font-size: 50px;
  line-height: 1.1;
}

.display-md {
  font-size: 40px;
  line-height: 1.1;
}

.body {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--black);
  color: var(--white);
}

.btn-primary:hover {
  background: #1a1a1a;
}

.btn-primary:active {
  background: #000000;
  transform: scale(0.96);
}

.btn-secondary {
  background: var(--white);
  color: var(--black);
}

.btn-secondary:hover {
  background: var(--gray-bg);
}

.btn-secondary:active {
  background: #e2e2e2;
  transform: scale(0.96);
}

.btn-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* Header */

.site-header {
  position: relative;
  padding: 28px 16px 8px;
}

.header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-img {
  height: 31px;
  width: 24px;
  object-fit: contain;
}

.header-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 16px;
}

.header-nav a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}

.menu-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.menu-icon {
  width: 24px;
  height: 24px;
}

/* Mobile nav dropdown — .header-nav is reused from the desktop layout,
   just repositioned as an absolute panel below the header and toggled
   by script.js instead of always shown. Scoped to below the desktop
   breakpoint so it can never fight with the always-visible inline row
   the min-width: 1024px block sets up further down. */

@media (max-width: 1023.98px) {
  .header-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    background: var(--white);
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 30;
  }

  .header-nav.is-open a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .header-nav.is-open a:last-child {
    border-bottom: none;
  }
}

/* Hero */

.hero {
  padding: calc(4px + var(--gap-loose)) 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.hero .display-lg {
  max-width: 320px;
}

.hero-title-desktop {
  display: none;
}

.hero .body {
  max-width: 480px;
}

/* Aulas / carrossel */

.aulas {
  padding-bottom: 0;
}

.aulas .display-md {
  text-align: center;
  padding: 8px 16px;
}

.pill-nav {
  overflow-x: auto;
  padding: 8px 0;
}

.pill-nav ul {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  width: max-content;
}

.pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--pill-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease;
}

.pill-active {
  color: var(--white);
}

/* Sliding indicator behind the pills — repositioned/resized by
   script.js to match the selected pill, animated via this transition
   so it "jumps" smoothly from one pill to the next. */

.pill-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 8px;
  background: var(--black);
  z-index: 0;
  transition: transform 320ms cubic-bezier(0.34, 1.15, 0.64, 1), width 320ms cubic-bezier(0.34, 1.15, 0.64, 1);
}

.aulas-desc {
  text-align: center;
  padding: 4px 16px;
  max-width: 480px;
  margin: 0 auto;
  transition: opacity 180ms ease;
}

.carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 16px;
  transition: opacity 180ms ease;
}

.is-swapping {
  opacity: 0;
}

.carousel-img {
  height: 329px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Drag-to-scroll (mouse): grab cursor + no text selection while dragging.
   Touch keeps native scrolling. See script.js. */

.drag-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.drag-scroll::-webkit-scrollbar {
  display: none;
}

.drag-scroll.is-scrollable {
  cursor: grab;
}

.drag-scroll.is-scrollable.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.drag-scroll.is-dragging img {
  pointer-events: none;
}

/* Promessas */

.promise {
  padding: 32px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.promise .display-md {
  max-width: 300px;
}

.promise .body {
  max-width: 328px;
}

.strip {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  padding: 8px 16px;
}

.strip img {
  height: 258px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Como funciona */

.como-funciona {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.como-funciona .display-md {
  max-width: 328px;
}

.como-funciona .body {
  max-width: 328px;
}

/* Preço */

.preco {
  background: var(--black);
  color: var(--white);
  padding: 32px 16px;
}

.preco .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.preco-title {
  color: var(--white);
  text-align: center;
  width: 100%;
}

.price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.price-parcelado,
.price-vista {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  text-align: center;
}

.price-parcelado-x {
  font-size: 24px;
}

.price-parcelado-val {
  font-size: 40px;
}

.price-ou {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.price-vista-rs {
  font-size: 20px;
}

.price-vista-val {
  font-size: 40px;
}

.price-vista-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
}

.preco .btn-secondary {
  max-width: 400px;
}

/* Quem faz */

.quem-faz {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.avatar {
  width: 153px;
  height: 153px;
  border-radius: 50%;
  object-fit: cover;
}

.quem-faz .display-lg {
  max-width: 300px;
}

.quem-faz .body {
  max-width: 328px;
}

/* FAQs */

.faqs {
  padding: 32px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.faqs .display-lg {
  max-width: 300px;
  text-align: center;
}

.faq-list {
  width: 100%;
  max-width: 400px;
}

.faq-item {
  border-radius: 12px;
  overflow: hidden;
}

.faq-question {
  /* Mobile Safari ignores display: flex on a <button> unless its native
     control appearance is reset first — without this the chevron drops
     to its own line instead of sitting inline with the question. */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.faq-question:hover {
  background: var(--gray-bg);
}

.faq-question span {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.faq-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 260ms cubic-bezier(0.34, 1.15, 0.64, 1);
}

.faq-item.is-open .faq-chevron {
  transform: rotate(90deg);
}

/* Accordion open/close — animating grid-template-rows (0fr → 1fr)
   instead of max-height gives a smooth animation to the answer's real
   height, whatever it ends up being, without hardcoding a max-height. */

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.34, 1, 0.64, 1);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.info-box {
  background: var(--gray-bg);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  max-width: 400px;
}

.info-badge {
  background: var(--black);
  border-radius: 9999px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-badge img {
  width: 16px;
  height: 16px;
}

.info-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
}

/* Footer */

.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 16px;
}

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-brand p {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0;
}

.footer-inner hr {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-links a {
  text-decoration: underline;
  font-size: 16px;
  font-weight: 500;
  padding: 10.5px 0;
}

.footer-instagram img {
  width: 24px;
  height: 24px;
}

.footer-copy {
  font-size: 8px;
  margin: 0;
}

/* Back to top */

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.15, 0.64, 1), background-color 180ms ease;
  z-index: 40;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: #1a1a1a;
}

.back-to-top.is-visible:active {
  transform: translateY(0) scale(0.9);
}

.back-to-top-icon {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  filter: brightness(0) invert(1);
}

/* ===================================================
   Desktop (from the Figma "Desktop" frame, node 65:259)

   The desktop design keeps the same type scale as mobile,
   but: the header trades the menu icon for inline links,
   content sections sit in a centered 686px (or 508px /
   1040px) column, carousels/strips break out to full
   viewport width, and CTA buttons stop stretching full
   width (fixed 328px, centered).
   =================================================== */

@media (min-width: 1024px) {
  :root {
    --container-width: 1280px;
  }

  /* Header: links instead of the hamburger */

  .header-nav {
    display: flex;
  }

  .menu-btn {
    display: none;
  }

  /* Content columns */

  .col-wide {
    max-width: 686px;
    margin: 0 auto;
  }

  .col-narrow {
    max-width: 508px;
    margin: 0 auto;
  }

  .container-preco {
    max-width: 1040px;
  }

  .hero .display-lg,
  .promise .display-md,
  .como-funciona .display-md,
  .quem-faz .display-lg,
  .faqs .display-lg {
    max-width: none;
  }

  .hero-title-mobile {
    display: none;
  }

  .hero-title-desktop {
    display: inline;
  }

  .hero .body,
  .aulas-desc,
  .promise .body,
  .como-funciona .body,
  .quem-faz .body {
    max-width: none;
  }

  /* CTAs: fixed width, centered, no longer full-bleed blocks */

  .btn-block {
    width: 100%;
    max-width: 328px;
  }

  .preco .btn-secondary {
    max-width: 328px;
  }

  /* Carousels/strips/pill-nav bleed to the full viewport width while
     the text above/below them stays inside the 686px column — this is
     also what keeps the pills from feeling clipped at the column edge */

  .carousel,
  .strip,
  .pill-nav {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .pill-nav ul {
    padding: 0 calc(50vw - 343px);
  }

  .strip img {
    height: 329px;
  }

  /* FAQ question rows and the info box read as narrower than the rest
     of the column on desktop otherwise — match the col-narrow width
     instead of the fixed mobile cap. */

  .faq-list,
  .info-box {
    max-width: none;
  }

  .back-to-top {
    right: 32px;
    bottom: 32px;
  }

  /* Applied by script.js when the aula's images don't fill the full
     viewport width (some aulas have fewer/narrower images) — keeps
     the carousel centered instead of stuck to the left with a gap on
     the right. Once the images overflow, it goes back to flex-start
     so the edge-to-edge scroll still works normally. Mobile doesn't
     need this — it's fine as-is. */

  .carousel.is-centered {
    justify-content: center;
  }
}