/* ============================================================
   Centre Homarus — landing page
   Design: Figma homarus.org (node 2003:1114, canvas 1920px)

   Desktop (>1212px): layout fixo em px idêntico ao Figma,
   escalado proporcionalmente via zoom (body) = viewport / 1920.
   Mobile/tablet (<=1212px): layout fluido próprio.
   ============================================================ */

:root {
  --navy: #00528a;
  --blue: #0082c9;
  --light: #d7edf8;
  --green: #40ad48;
  --yellow: #fdb621;
  --white: #ffffff;

  --font-serif: "Roboto Serif", Georgia, serif;
  --font-alt: "Montserrat Alternates", "Trebuchet MS", sans-serif;

  --radius-card: 40px;
  --radius-big: 50px;
  --radius-pill: 100px;

  /* Tipografia desktop = px do Figma (o zoom escala tudo junto) */
  --text-body: 22px;
  --text-small: 18px;
  --text-eyebrow: 40px;
  --text-h2: 80px;
  --text-label: 32px;
}

@media (max-width: 1212px) {
  :root {
    --text-body: 18px;
    --text-small: 17px;
    --text-eyebrow: 26px;
    --text-h2: 44px;
    --text-label: 24px;
  }
}

@media (max-width: 760px) {
  :root {
    --text-body: 17px;
    --text-eyebrow: 22px;
    --text-h2: 36px;
    --text-label: 21px;
  }
}

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

/* Acima de 1212px o js/main.js aplica body.style.zoom = viewport/1920,
   escalando o canvas fixo de 1920px proporcionalmente. */

body {
  background: var(--light);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; border: 0; cursor: pointer; background: none; }
address { font-style: normal; }

[aria-hidden="true"] { pointer-events: none; }

/* ============ Banner construction ============ */

.construction-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 9px 20px;
  background: var(--green);
  color: var(--white);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 20;
}

/* ============ Header ============ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 98px;
  padding: 15px 50px;
  background: var(--navy);
  position: relative;
  z-index: 20;
}

.site-logo { width: 295px; height: auto; }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.lang-toggle a { padding: 5px 0; }
.lang-toggle a:hover { text-decoration: underline; }

.toggle-pill {
  position: relative;
  width: 28px;
  height: 14px;
  padding: 0;
  border-radius: 7px;
  background: var(--blue);
  flex-shrink: 0;
  cursor: pointer;
}

/* FR (padrão): bolinha à direita, junto de "Français" */
.toggle-dot {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  transform: translateX(14px);
  transition: transform 0.22s ease;
}

/* Página em inglês: bolinha à esquerda, junto de "English" */
html[lang="en"] .toggle-dot { transform: none; }

/* Classes aplicadas pelo JS no clique, para a bolinha deslizar antes de navegar */
html.lang-to-en .toggle-dot { transform: none; }
html.lang-to-fr .toggle-dot { transform: translateX(14px); }

/* ============ Hero ============ */
/* Figma: header termina em y178; hero ocupa y178..1130 (952px) */

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

/* Union navy (2007:1290): x-82.8 y392 w2204 h738 → hero-rel top 214 */
.hero-wave--navy {
  position: absolute;
  top: 214px;
  left: calc(50% + 59px);
  transform: translateX(-50%);
  width: 2204px;
  height: 738px;
  z-index: 0;
}

/* Union azul (2007:1284): x-157 y-64 w2234 h1148 → hero-rel top -242 */
.hero-wave--blue {
  position: absolute;
  top: -242px;
  left: 50%;
  transform: translateX(-50%);
  width: 2234px;
  height: 1148px;
  z-index: 1;
}

/* Foto blob (grupo 2007:1336): x837.8 y-92 w1233.9 h1160 → right -150.6, top -270 */
.hero-photo {
  position: absolute;
  top: -270px;
  right: -151px;
  width: 1233px;
  height: 1160px;
  z-index: 2;
  -webkit-mask-image: url("../assets/mask-hero.svg");
  mask-image: url("../assets/mask-hero.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 35%;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 112px 52px 0;
}

.hero-eyebrow {
  color: var(--white);
  font-size: var(--text-eyebrow);
  line-height: 1.92;
}

/* Título do hero: artes tagline-fr.png / tagline-en.png (Figma) */
.hero-title { margin-top: 29px; }

.hero-title img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bolhas do hero — coordenadas Figma (página − 178) */
.hero-bubbles .bub { position: absolute; z-index: 2; }
.bub-1 { left: 693px; top: 625px; width: 24px; }
.bub-2 { left: 1131px; top: 214px; width: 24px; }
.bub-3 { left: 922px; top: 54px; width: 42px; }
.bub-4 { left: 1243px; top: 84px; width: 24px; }
.bub-5 { left: 782px; top: 700px; width: 28px; }
.bub-6 { left: 856px; top: 660px; width: 28px; }
.bub-7 { left: 1080px; top: 180px; width: 28px; }

/* ============ Section intro (compartilhado) ============ */

.section-intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 104px;
  width: 1540px;
  margin-inline: auto;
  z-index: 2;
}

.section-intro-heading {
  display: flex;
  flex-direction: column;
  gap: 47px;
  flex-shrink: 0;
  width: 477px;
}

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 400;
  line-height: 0.9;
}

.section-intro-heading h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1;
}

.section-intro-text {
  flex: 1;
  font-size: var(--text-body);
  line-height: 1.64;
  max-width: 870px;
}

.section-intro-text p + p { margin-top: 1.64em; }

.section-intro--light { color: var(--white); }

/* ============ L'expérience ============ */
/* Figma: texto em y1235..1560 sobre o fundo claro da página */

.experience {
  position: relative;
  padding: 105px 0 0;
  z-index: 2;
}

/* ============ Étapes 1-2-3 ============ */
/* Figma: grid de cards em x178..1721, y1740..2803 */

.steps {
  position: relative;
  padding: 181px 0 278px;
  z-index: 1;
}

.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: 713px 701px;
  gap: 105px 129px;
  width: 1543px;
  margin-left: 178px;
}

.step-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 50px 50px 50px 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 13px;
  min-height: 452px;
}

/* Figma: o texto do card 1 tem padding simétrico de 150px (largura 413px) */
.step-card--1 { min-height: 506px; padding-right: 150px; }

.step-card h3 {
  font-size: 40px;
  font-weight: 400;
  line-height: 2;
}

.step-card--3 h3 { line-height: 1.25; }

.step-card p {
  font-size: var(--text-body);
  line-height: 1.64;
}

.tag {
  align-self: flex-start;
  background: var(--light);
  border-radius: 5px;
  padding: 0 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.25;
}

.step-number {
  position: absolute;
  top: 65px;
  left: -75px;
  width: 195px;
  height: 195px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--white);
  font-family: var(--font-alt);
  font-weight: 600;
  font-size: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.3em;
}

.step-number::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 71px;
  height: 32px;
  transform: translateX(-50%) rotate(8.4deg);
  background: url("../assets/squiggle.svg") no-repeat center / contain;
}

.step-card--2 .step-number { top: 36px; left: -97px; }
.step-card--3 .step-number { top: 29px; left: -89px; }

.steps-showcase {
  position: relative;
  min-height: 506px;
}

/* Título em x816 (showcase começa em x1020) y1886 → left -204, top 146 */
.steps-title {
  position: absolute;
  left: -204px;
  top: 146px;
  width: 531px;
  z-index: 3;
  font-size: var(--text-h2);
  line-height: 1;
}

/* No desktop o wrapper não gera caixa: as fotos posicionam-se
   direto no showcase, nas coordenadas do Figma. */
.magie-cluster { display: contents; }

.magie-photo {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

/* Figma: círculos em (1560,1799) d269 · (1294,2019) d361 · (1605,2277) d242 */
.magie-photo-1 { left: 540px; top: 59px; width: 269px; height: 269px; }
.magie-photo-2 { left: 274px; top: 279px; width: 361px; height: 361px; }
.magie-photo-3 { left: 585px; top: 537px; width: 242px; height: 242px; }

/* Bolhas grandes à direita (2007:1269): página (1768, 2053) → grid-rel */
.steps-bubbles-right {
  position: absolute;
  top: 313px;
  left: 1590px;
  width: 1568px;
  z-index: 2;
}

/* Traçados pontilhados e bolhas — coordenadas relativas ao grid (x-178, y-1740).
   No Figma eles são pintados depois dos cards → ficam por cima. */
.steps-dotted { position: absolute; z-index: 2; }
.steps-dotted-1 { left: 81px; top: 436px; width: 296px; }
.steps-dotted-2 { left: 577px; top: 1031px; width: 363px; }

.steps .bub { position: absolute; z-index: 2; width: 28px; }
.steps-bub-1 { left: 363px; top: 640px; }
.steps-bub-2 { left: 930px; top: 1009px; }
.steps-bub-3 { left: 61px; top: 421px; }
.steps-bub-4 { left: 559px; top: 1010px; }

/* ============ Nos espèces ============ */
/* Figma: blob navy em (-278, 3081) 2585×1803; conteúdo a partir de y3329 */

.species {
  position: relative;
  padding: 248px 0 104px;
  z-index: 2;
}

.species-blob {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2585px;
  height: 1803px;
  z-index: 0;
}

.species-carousel {
  position: relative;
  margin-top: 50px;
  z-index: 2;
}

/* Altura fixa do Figma (card ativo = 1078px): a seção não muda de
   tamanho quando a descrição da espécie ativa é maior ou menor. */
.carousel-track {
  display: flex;
  align-items: center;
  gap: 27px;
  height: 1078px;
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

.species-card {
  position: relative;
  flex-shrink: 0;
  width: 476px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  border-radius: var(--radius-card);
}

/* O card ativo reserva 130px no rodapé para as setas (50 gap + 80 botão) */
.species-card.is-active { width: 537px; padding-bottom: 170px; }

.species-photo {
  width: 331px;
  height: 354px;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: width 0.45s ease, height 0.45s ease;
}

.species-card.is-active .species-photo {
  width: 457px;
  height: 489px;
}

.species-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.species-label {
  position: absolute;
  top: 20px;
  left: 40px;
  z-index: 2;
  background: var(--white);
  color: var(--navy);
  border-radius: 5px;
  padding: 10px 20px;
  font-size: var(--text-label);
  font-weight: 800;
  line-height: 1.15;
  max-width: calc(100% - 40px);
}

.species-card.is-active .species-label { left: 0; max-width: 100%; }

.species-desc {
  display: none;
  color: var(--white);
  font-size: var(--text-small);
  line-height: 1.67;
  max-width: 457px;
}

.species-card.is-active .species-desc { display: block; }

.carousel-nav {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 19px;
  z-index: 3;
}

.carousel-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-btn:hover { background: #006ba6; transform: scale(1.05); }
.carousel-btn:active { transform: scale(0.97); }

/* ============ Billets ============ */
/* Figma: card branco em (105, 5012) 1690×622 */

.tickets {
  position: relative;
  padding: 128px 0 100px;
  z-index: 1;
}

/* Bolhas (2026:178): wrapper rotacionado na página (-88.6, 4484) 1816×1391;
   o frame interno 1628×1076 gira -11.99° em torno do centro (819, 5180).
   Seção começa em y4884 → img em (5, -242). */
.tickets-bubbles {
  position: absolute;
  left: 5px;
  top: -242px;
  width: 1628px;
  height: 1076px;
  transform: rotate(-11.99deg);
  z-index: 0;
}

.tickets-card {
  position: relative;
  width: 1690px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--radius-big);
  padding: 100px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  z-index: 1;
}

.tickets-tag {
  position: absolute;
  top: -12px;
  left: 95px;
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 10px 20px;
  background: var(--light);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.25;
}

.tickets-grid {
  display: flex;
  align-items: flex-start;
  gap: 104px;
}

.tickets-grid .section-intro-heading { width: 477px; }

.price-table {
  flex: 1;
  min-width: 0;
}

.price-row {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 88px;
  padding: 20px 40px;
  border: 1px solid var(--navy);
}

.price-row + .price-row { border-top: 0; }
.price-row:first-child { border-radius: 10px 10px 0 0; }
.price-row:last-child { border-radius: 0 0 10px 10px; }

.icon { flex-shrink: 0; }

.price-icon {
  font-size: 60px;
  color: var(--blue);
}

.price-row p {
  font-size: var(--text-small);
  line-height: 1.67;
  max-width: 400px;
}

.price-pill {
  background: var(--blue);
  color: var(--white);
  border-radius: 5px;
  padding: 10px 20px;
  font-size: var(--text-label);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.tickets-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 80px;
  background: var(--light);
  border-radius: 20px;
  padding: 30px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item .icon {
  font-size: 20px;
}

.info-item p {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.64;
}

/* ============ Footer ============ */
/* Figma: onda branca y5882 (2278×909, rot 178.9°) · conteúdo y6076 ·
   faixa final y6294..6696 (navy 2204×803 + azul 2234×1193, rot 180°) */

.site-footer {
  position: relative;
  z-index: 0;
  /* a onda branca rotacionada ultrapassa a altura do footer;
     sem o clip ela estica a área de scroll da página */
  overflow: clip;
}

.footer-wave--white {
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translateX(-50%) rotate(178.9deg);
  width: 2278px;
  height: 909px;
  z-index: 0;
}

.footer-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 95px;
  padding: 342px 20px 0;
  z-index: 1;
}

.footer-logo { width: 67px; height: auto; }

.footer-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.footer-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer-line .icon {
  color: var(--blue);
  font-size: 20px;
  width: 23px;
  margin-top: 4px;
}

.footer-line address,
.footer-chip {
  font-size: 18px;
  line-height: 1.67;
}

.footer-chip {
  align-self: flex-start;
  background: var(--light);
  border-radius: 5px;
  padding: 0 5px;
}

.footer-chip:hover { text-decoration: underline; }

.footer-address .footer-chip { margin-left: 28px; }

.footer-socials {
  display: flex;
  gap: 19px;
}

.social-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.social-btn:hover { background: #006ba6; }
.social-btn .icon { font-size: 22px; }

.footer-waves-bottom {
  position: relative;
  height: 402px;
  margin-top: 93px;
  overflow: hidden;
  z-index: 1;
}

.footer-wave--navy {
  position: absolute;
  top: 0;
  left: calc(50% - 25px);
  transform: translateX(-50%) rotate(180deg);
  width: 2204px;
  height: 803px;
}

.footer-wave--blue {
  position: absolute;
  top: 63px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width: 2234px;
  height: 1193px;
}

.footer-links {
  position: absolute;
  top: 162px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.footer-link-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 20px;
  background: var(--white);
  border-radius: var(--radius-pill);
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.footer-link-pill .icon { font-size: 22px; }
.footer-link-pill:hover { box-shadow: 0 4px 14px rgba(0, 82, 138, 0.25); }

/* ============================================================
   Mobile / tablet (<= 1100px) — layout fluido próprio
   ============================================================ */

@media (max-width: 1212px) {
  .construction-banner { font-size: 20px; min-height: 60px; }

  .site-header { padding: 15px 28px; }
  .site-logo { width: 220px; }

  /* Hero */
  .hero {
    height: auto;
    min-height: 640px;
    padding-bottom: 80px;
  }

  .hero-wave--navy, .hero-bubbles { display: none; }

  .hero-wave--blue {
    top: -120px;
    left: 50%;
    width: max(160%, 900px);
    height: 620px; /* esticada para o título ficar inteiro sobre o azul */
  }

  .hero-eyebrow { line-height: 1.35; }

  .hero-photo {
    top: auto;
    bottom: -60px;
    right: -100px;
    width: 560px;
    height: 530px;
  }

  .hero-content { padding: 48px 28px 0; }

  .hero-title {
    margin-top: 16px;
    max-width: 560px;
  }

  /* Intros */
  .section-intro {
    flex-direction: column;
    gap: 32px;
    width: auto;
    padding-inline: 32px;
  }
  .section-intro-heading { width: 100%; gap: 20px; }
  .section-intro-heading h2 { max-width: 560px; }

  .experience { padding: 72px 0 0; }

  /* Étapes */
  .steps { padding: 90px 0 140px; }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 64px;
    width: auto;
    margin-inline: 44px;
  }

  /* Showcase (título da seção + 3 fotos em linha) vem ANTES dos cards */
  .steps-showcase {
    order: -1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-bottom: 12px;
  }

  .steps-title {
    position: static;
    width: 100%;
    text-align: center;
  }

  .magie-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }

  .magie-photo {
    position: static;
    width: 200px;
    height: 200px;
  }

  .steps-dotted, .steps .bub, .steps-bubbles-right { display: none; }

  .step-card, .step-card--1 { min-height: 0; }
  .step-card { padding: 40px 32px 36px 120px; }
  .step-card h3, .step-card--3 h3 { font-size: 28px; line-height: 1.3; }

  .step-number {
    width: 120px;
    height: 120px;
    font-size: 72px;
    top: 40px;
    left: -40px;
  }
  .step-card--2 .step-number, .step-card--3 .step-number { top: 40px; left: -40px; }
  .step-number::after { width: 46px; height: 21px; bottom: 16%; }

  /* Espèces */
  /* Abaixo de 1212px o blob curvo não cabe sem cortar/esticar:
     troca por fundo sólido navy (mesma cor do SVG). */
  .species {
    padding: 80px 0;
    background: var(--navy);
  }

  .species-blob { display: none; }

  .carousel-track { height: auto; }

  /* Todos os cards com a mesma estrutura (foto igual + espaço da descrição
     sempre reservado): a altura do track não muda ao trocar de espécie. */
  .species-card,
  .species-card.is-active { width: 420px; padding: 24px 24px 130px; gap: 30px; }

  .species-photo,
  .species-card.is-active .species-photo { width: 100%; height: 400px; }

  .species-desc { display: block; visibility: hidden; }
  .species-card.is-active .species-desc { visibility: visible; }

  .carousel-nav { bottom: 24px; }

  .species-label { left: 0; top: 8px; padding: 8px 14px; }

  .carousel-btn { width: 60px; height: 60px; font-size: 28px; }

  /* Billets */
  .tickets { padding: 90px 28px; }
  .tickets-bubbles { display: none; }

  /* A tag fica absoluta sobre o topo do card: reserva espaço extra no
     padding-top para que ela não encoste no .eyebrow do heading. */
  .tickets-card { width: auto; padding: 80px 48px 48px; }
  .tickets-tag { left: 32px; min-height: 56px; line-height: 1.6; }

  .tickets-grid { flex-direction: column; gap: 36px; }
  .tickets-grid .section-intro-heading { width: 100%; }

  .price-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 16px 20px;
  }
  .price-icon { font-size: 36px; }
  .price-pill { padding: 8px 14px; }

  .tickets-info { gap: 20px 40px; padding: 22px; }

  /* Footer */
  .footer-wave--white {
    top: auto;
    bottom: 0;
    width: max(160%, 1000px);
    height: calc(100% - 60px);
  }

  .footer-content {
    gap: 44px;
    padding: 140px 20px 0;
  }

  .footer-waves-bottom { height: 300px; margin-top: 50px; }

  .footer-wave--navy { width: max(140%, 1000px); height: auto; top: 0; left: 50%; }
  .footer-wave--blue { width: max(145%, 1020px); height: auto; top: 70px; }

  .footer-links { top: 110px; }
}

@media (max-width: 760px) {
  .site-header { flex-direction: column; gap: 12px; }

  .hero { min-height: 540px; padding-bottom: 60px; }
  .hero-wave--blue { top: -100px; height: 560px; }
  .hero-photo { width: 400px; height: 380px; right: -120px; bottom: -50px; }
  .hero-title { max-width: 360px; }

  .section-intro { padding-inline: 20px; }

  /* Steps — mockup mobile do Figma (node 2137:136, frame 399px) */
  .steps-grid { margin-inline: 18px; gap: 115px; }

  /* Título + cluster de fotos sobrepostas ANTES dos cards.
     O cluster usa % do próprio wrapper (proporções do frame 399px
     do Figma) e encolhe junto em telas menores. */
  .steps-showcase {
    order: -1;
    display: block;
    position: relative;
    margin: 0;
    max-width: 380px;
  }

  .steps-title {
    text-align: left;
    font-size: 50px;
    line-height: 1;
    max-width: 360px;
    margin-bottom: 24px;
  }

  .magie-cluster {
    display: block;
    position: relative;
    width: 100%;
    max-width: 363px;
    aspect-ratio: 363 / 275;
  }

  .magie-photo { position: absolute; height: auto; aspect-ratio: 1; }
  .magie-photo-1 { right: 0; left: auto; top: 0; width: 37.7%; }
  .magie-photo-2 { left: 0; top: 16.4%; width: 50.4%; }
  .magie-photo-3 { left: 51.2%; top: 51.6%; width: 33.9%; }

  .species { padding: 56px 0; }

  .species-card, .species-card.is-active { width: 320px; }
  .species-photo, .species-card.is-active .species-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 331 / 354;
  }
  .species-desc { max-width: 100%; }

  .tickets { padding: 70px 16px; }
  /* Tag ainda absoluta e podendo quebrar em 2 linhas aqui. */
  .tickets-card { padding: 92px 24px 32px; }

  /* Cards com círculo numerado centralizado sobrepondo o topo */
  .step-card { padding: 100px 30px 30px; border-radius: 40px; }
  .step-card h3, .step-card--3 h3 { font-size: 30px; line-height: 1.33; }
  .step-card p { font-size: 16px; line-height: 1.875; }
  .tag { font-size: 16px; }

  .step-number, .step-card--2 .step-number, .step-card--3 .step-number {
    top: -72px;
    left: 50%;
    transform: translateX(-50%);
    width: 153px;
    height: 153px;
    font-size: 80px;
  }
  .step-number::after { width: 56px; height: 25px; }

  .tickets-info { flex-direction: column; align-items: flex-start; }

  .footer-content { flex-direction: column; }
  .footer-blocks { flex-direction: column; }
  .footer-link-pill { white-space: normal; text-align: center; }
  .footer-links { width: calc(100% - 40px); }
}

@media (max-width: 520px) {
  .price-row {
    grid-template-columns: 36px minmax(0, 1fr);
    row-gap: 12px;
  }
  .price-icon { font-size: 26px; }
  .price-row .price-pill {
    grid-column: 2;
    justify-self: start;
    font-size: 1.15rem;
  }

  /* Abaixo de 520px a tag volta ao fluxo normal — desfaz o espaço extra. */
  .tickets-card { padding: 32px 24px; }

  .tickets-tag {
    position: static;
    align-self: flex-start;
    margin-bottom: -20px;
  }
}

/* ============ Motion preferences ============ */

@media (prefers-reduced-motion: reduce) {
  .carousel-track, .species-photo, .carousel-btn, .toggle-dot { transition: none; }
}