/* ================================================================
   COLÉGIO MAXI — PROVA DE BOLSAS
   Ordem: reset · variáveis · tipografia · componentes ·
          header · seções · footer · media queries
   ---------------------------------------------------------------
   Técnica: cada dobra é uma "tela escalável". A imagem de fundo
   (arte 1920px já com foto) define a altura; os textos são
   sobrepostos em posições percentuais e dimensionados em cqw,
   travando o layout na arte em qualquer largura (desktop, notebook
   e tablet). O mobile tem re-layout próprio nas media queries.
   ================================================================ */

/* ============================= RESET ============================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  /* 1rem = 16px */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Montserrat Maxi", Arial, sans-serif;
  line-height: 1.35;
  color: var(--c-dark);
  background: var(--c-cream);
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-SemiBoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Maxi";
  src: url("../fontes/Montserrat-ExtraBoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

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

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

ul {
  list-style: none;
}

/* =========================== VARIÁVEIS ========================== */
:root {
  --c-maroon-dark: #1c0605;
  --c-maroon: #130404;
  --c-maroon-2: #130404;
  --c-red: #e01f1a;
  --c-red-dark: #b4141a;
  --c-cream: #ece0b0;
  --c-cream-light: #f2e9c8;
  --c-gold: #ccbe77;
  --c-gold-2: #e2c877;
  --c-gold-dark: #a8842f;
  --c-dark: #1a1a1a;
  --c-white: #ffffff;
  --c-warm-white: #f6efe2;

  --page-max: 1920px;
}

/* ========================== TIPOGRAFIA ========================= */
h1,
h2,
h3 {
  line-height: 1.02;
  font-weight: 800;
}

strong {
  font-weight: 700;
}

/* ========================= COMPONENTES ========================= */

/* Estrutura base da dobra (tela escalável) */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
}

.dobra {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
}

.dobra__bg {
  width: 100%;
  height: auto;
  display: block;
}

.dobra__overlay {
  position: absolute;
  inset: 0;
}

/* Visibilidade por breakpoint */
.mbl-only {
  display: none;
}

/* Botão "tour" (marca-texto em duas cores, efeito escada) ------- */
.btn-tour {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.15cqw;
  line-height: 1.15;
}

.btn-tour strong,
.btn-tour span {
  padding: 0.28cqw 0.6cqw;
}

.btn-tour strong {
  background: var(--c-gold);
  color: #c90000;
  font-weight: 700;
}

.btn-tour span {
  background: var(--c-red-dark);
  color: #ccbe77;
  font-weight: 400;
}

/* Espaçamento apenas entre o bloco dourado e o vermelho */
.btn-tour span:first-of-type {
  margin-top: 0.6cqw;
}

/* Botões CTA (pílula) ------------------------------------------ */
.btn-cta {
  display: inline-block;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 1.7cqw;
  padding: 1cqw 3.4cqw;
  border-radius: 100px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* .btn-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
} */

.btn-cta--dark {
  background: #121212;
  color: var(--c-white);
}

.btn-cta--gold {
  background: linear-gradient(180deg, var(--c-gold-2), var(--c-gold-dark));
  color: #3a2a06;
  box-shadow: inset 0 0.15cqw 0 rgba(255, 255, 255, 0.45),
    0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.25);
}

/* Listas em pílula (dobras 3 e 4) ------------------------------ */
.pill-list {
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
  margin-left: 0;
  padding-left: 0;
}

.pill-list li {
  color: var(--c-white);
  font-size: 1.25cqw;
  line-height: 1.25;
  padding: 0.9cqw 1.3cqw;
  border-radius: 0 0.6cqw 0.6cqw 0;
  border-left: 0.4cqw solid var(--c-red);
}

.pill-list--maroon li {
  background: var(--c-maroon);
}

.pill-list--red li {
  background: var(--c-red-dark);
  border-left-color: #7d0d10;
}

/* ============================ HEADER =========================== */
/* DOBRA 1 — HERO */
.hero-logo {
  position: absolute;
  top: 6%;
  left: 4.5%;
  display: flex;
  align-items: center;
  gap: 1cqw;
}

.hero-logo__maxi {
  height: 5cqw;
  width: auto;
}

.hero-logo__years {
  height: 5.4cqw;
  width: auto;
}

.hero-copy {
  position: absolute;
  left: 4.5%;
  top: 27%;
  width: 36%;
  color: var(--c-warm-white);
}

.hero-title-img {
  width: 28cqw;
  height: auto;
  display: block;
}

.hero-lead {
  margin-top: 1.6cqw;
  font-size: 1.42cqw;
  line-height: 1.28;
  color: var(--c-gold);
}

.hero-copy .btn-tour {
  margin-top: 1.8cqw;
}

/* Card do formulário */
.hero-card {
  --hero-card-gutter: 1.6cqw;
  position: absolute;
  top: 5.5%;
  right: 3%;
  width: 30%;
  background: #ccbe77;
  border-radius: 2.5cqw;
  padding: 2.15cqw var(--hero-card-gutter) 0;
  color: var(--c-maroon-dark);
  box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.3);
  font-family: "Montserrat Maxi", Arial, sans-serif;
  overflow: hidden;
}

.hero-card__eyebrow {
  font-size: 3.15cqw;
  font-weight: 400;
  line-height: 60%;
  text-align: center;
}

.hero-card__title {
  margin-top: 0.2cqw;
  font-size: 3.05cqw;
  font-weight: 900;
  color: #c90000;
  line-height: 60%;
  text-align: center;
}

.hero-card__date {
  display: block;
  width: 100%;
  background: #b40000;
  color: #fff4b7;
  font-size: 4.05cqw;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  padding: 0.52cqw 1.35cqw 0.62cqw;
  border-radius: 1.6cqw;
  margin: 1.2cqw auto 0;
  position: relative;
  z-index: 2;
}

.hero-card__embed {
  background: var(--c-white);
  border-radius: 0;
  width: calc(100% + (var(--hero-card-gutter) * 2));
  height: 25.7cqw;
  margin: -1.15cqw calc(var(--hero-card-gutter) * -1) 0;
  padding-top: 1.15cqw;
  overflow: hidden;
}

.hero-card__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hero-card__terms {
  width: calc(100% + (var(--hero-card-gutter) * 2));
  margin: 0 calc(var(--hero-card-gutter) * -1);
  padding: 0.65cqw var(--hero-card-gutter) 1cqw;
  background: var(--c-white);
  font-size: 0.43cqw;
  line-height: 1.22;
  text-align: justify;
  color: rgba(28, 6, 5, 0.72);
  overflow-wrap: anywhere;
}

/* Links inferiores — alinhados abaixo do formulário */
.hero-links {
  position: absolute;
  left: auto;
  right: 3%;
  /* top: calc(5.5% + 45.5cqw); */
  top: calc(5.5% + 43cqw);
  width: 30%;
  display: flex;
  justify-content: center;
  gap: 3cqw;
  padding: 0;
  background: none;
}

.hero-links a {
  font-style: italic;
  font-weight: 600;
  font-size: 1.05cqw;
  color: #ccbe77;
  text-decoration: underline;
  text-shadow: 0 0.1cqw 0.3cqw rgba(0, 0, 0, 0.6);
}

/* .hero-links a:hover {
  color: var(--c-cream);
} */

/* Notebook: proporções da arte de campanha em 1350 px. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .hero-logo {
    top: 5.5%;
    left: 5%;
  }

  .hero-copy {
    left: 5%;
    top: 26%;
    width: 36%;
  }

  .hero-title-img {
    width: 28cqw;
  }

  .hero-lead {
    margin-top: 1.45cqw;
    font-size: 1.48cqw;
  }

  .btn-tour {
    font-size: 1.22cqw;
  }

  .btn-tour strong,
  .btn-tour span {
    padding: 0.26cqw 0.58cqw;
  }

  .btn-tour span:first-of-type {
    margin-top: 0.55cqw;
  }

  .hero-copy .btn-tour {
    margin-top: 1.65cqw;
  }

  .hero-card {
    --hero-card-gutter: 1.35cqw;
    top: 1.5%;
    right: 2.5%;
    width: 32.5%;
    padding: 1.35cqw 1.35cqw 0;
  }

  .hero-card__embed {
    height: 28.2cqw;
  }

  .hero-card__terms {
    font-size: 0.48cqw;
  }

  .hero-links {
    right: 2.5%;
    width: 32.5%;
    gap: 4cqw;
    padding: 0.6cqw 0 0;
    top: calc(1.5% + 45.2cqw);
    bottom: auto;
    z-index: 7;
  }

  .dobra--3 .pill-list li {
    max-width: 380px !important;
  }

  .d3-text .btn-cta {
    max-width: 380px !important;
  }

  .dobra--4 .pill-list {
    max-width: 550px !important;
  }
}

/* ============================ SEÇÕES ========================== */

/* DOBRA 2 — ENSINO NÍVEL MAXI */
.dobra--2 {
  aspect-ratio: 1920 / 780;
  /* faixa mais compacta que a arte original */
  overflow: visible;
  z-index: 2;
}

.dobra--2 .dobra__bg {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.d2-text {
  position: absolute;
  /* left: 4.5%; */
  left: 15%;
  top: 15%;
  width: 42%;
  color: var(--c-maroon-dark);
  padding-right: 2.5cqw;
}

.d2-title {
  line-height: 0.95;
}

.d2-title span {
  display: block;
  font-size: 3cqw;
  font-weight: 500;
}

.d2-title strong {
  display: block;
  font-size: 3cqw;
  font-weight: 800;
}

.d2-sub {
  margin-top: 1.5cqw;
  font-size: 1.5cqw;
  font-weight: 700;
  color: var(--c-red-dark);
}

.d2-p {
  margin-top: 1.5cqw;
  font-size: 1.15cqw;
  line-height: 1.3;
}

/* Destaque em vermelho da marca (antes preto/bold) */
.d2-p strong {
  color: var(--c-red-dark);
  font-weight: 700;
}

/* Aluno com medalhas — grande; cortado na faixa (cotovelo na divisória) */
.d2-aluno {
  position: absolute;
  right: 5%;
  top: 1.0cqw;
  height: 45cqw;
  width: auto;
  z-index: 3;
}

/* DOBRA 3 — ENSINO FUNDAMENTAL */
.dobra--3 {
  z-index: 1;
}

.d3-text {
  position: absolute;
  left: 56%;
  top: 7%;
  width: 36%;
}

.d3-title span {
  display: block;
  font-size: 3.15cqw;
  font-weight: 800;
  color: #c60000;
}

.d3-title strong {
  display: block;
  font-size: 3.15cqw;
  font-weight: 900;
  color: var(--c-dark);
}

.d3-title .is-red {
  color: #c60000;
}

.d3-p {
  margin: 0.8cqw 0 1.45cqw;
  font-size: 1.55cqw;
  line-height: 1.28;
  color: var(--c-dark);
}

.d3-text .btn-cta {
  display: block;
  width: 100%;
  margin-top: 1.35cqw;
  padding: 0.62cqw 1.2cqw;
  border-radius: 100px;
  background: #080808;
  color: #f4e8bd;
  font-size: 1.72cqw;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 0.35cqw 0.55cqw rgba(0, 0, 0, 0.25);
  max-width: 483px;
}

.dobra--3 .pill-list {
  gap: 1.5rem;
}

.dobra--3 .pill-list li {
  min-height: 3.2cqw;
  padding: 0.58cqw 1.05cqw;
  border-left-width: 0.9cqw;
  border-radius: 0;
  background: #210504;
  color: #f4e6a3;
  font-size: 1.28cqw;
  line-height: 1.18;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 483px;
}

/* DOBRA 4 — ENSINO MÉDIO */
.d4-text {
  position: absolute;
  /* left: 1.5%; */
  left: 15%;
  top: 4%;
  width: 50.5%;
}

.d4-title {
  font-size: 4cqw;
  font-weight: 900;
  color: #141414;
  line-height: 0.98;
}

.d4-sub {
  margin: 1.55cqw 0 2.15cqw;
  font-size: 1.9cqw;
  font-weight: 400;
  line-height: 1.25;
  color: #171717;
}

.d4-text .btn-cta {
  width: 26cqw;
  max-width: 100%;
  margin-top: 2.1cqw;
  padding: 0.82cqw 1.5cqw;
  font-size: 1.65cqw;
  line-height: 1.1;
  text-align: center;
  color: #b80000;
  background: linear-gradient(180deg, #e5da91 0%, #c9b75e 100%);
  box-shadow: inset 0 0.16cqw 0 rgba(255, 255, 255, 0.5),
    0 0.35cqw 0.6cqw rgba(0, 0, 0, 0.28);
}

.dobra--4 .pill-list {
  gap: 1.05cqw;
  padding-left: 0;
  width: 100%;
  max-width: 700px;
}

.dobra--4 .pill-list li {
  min-height: 5.45cqw;
  padding: 1.05cqw 0.55cqw;
  border: 0;
  border-left: 1.15cqw solid #ccbe77;
  border-radius: 0;
  background: #b50000;
  color: #ccbe77;
  font-size: 1.42cqw;
  line-height: 1.25;
  display: flex;
  align-items: center;
}

/* DOBRA 5 — AMPLA ESTRUTURA */
.dobra--5 {
  z-index: 3;
  overflow: visible;
}

.dobra--5>picture>.dobra__bg {
  margin-top: -1.4cqw;
}

.d5-text {
  position: absolute;
  left: 48.5%;
  top: 24%;
  width: 31.5%;
}

.d5-title {
  font-size: 2cqw;
  font-weight: 900;
  color: #ccbe77;
  line-height: 0.98;
}

.d5-p {
  margin: 1.8cqw 0 1.45cqw;
  font-size: 1.35cqw;
  font-weight: 400;
  color: #CCBE77;
  line-height: 1.35;
}

.dobra--5 .btn-cta {
  display: block;
  width: 65%;
  padding: 0.72cqw 1.5cqw;
  border-radius: 100px;
  background: #080808;
  color: #f4e8bd;
  font-size: 1.55cqw;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 0.35cqw 0.55cqw rgba(0, 0, 0, 0.32);
}

/* ============================ FOOTER ========================== */
.footer {
  /* background:
    radial-gradient(circle at 75% 20%, #4a1210 0%, transparent 55%),
    linear-gradient(180deg, #150403, #0c0202); */
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(120, 0, 0, .65) 0%,
      rgba(80, 0, 0, .45) 35%,
      transparent 80%),
    linear-gradient(180deg,
      #170404 0%,
      #0d0202 100%);
  padding: 3.8rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 2.2rem;
  row-gap: 1.55rem;
}

.footer__logo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}

.footer__maxi {
  height: 7.1rem;
  width: auto;
}

.footer__years {
  height: 7.4rem;
  width: auto;
}

.footer__links {
  display: flex;
  gap: 2.5rem;
}

.footer__links a {
  color: #ccbe77;
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 0.12rem;
}

/* .footer__links a:hover {
  color: var(--c-cream);
} */

.footer__social {
  display: flex;
  gap: 0.9rem;
}

.footer__icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccbe77;
  color: #4a1210;
  border-radius: 0.12rem;
}

.footer__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* .footer__icon:hover {
  background: var(--c-white);
} */

/* ========================= MEDIA QUERIES ====================== */
@media screen and (max-width: 1680px) {
  .d4-text {
    left: 11%;
  }
}

@media screen and (max-width: 1600px) {
  .dobra--4 .pill-list {
    max-width: 650px;
  }
}

@media screen and (max-width: 1440px) {
  .dobra--4 .pill-list {
    max-width: 600px;
  }
}



/* Tablet — mantém a tela escalável, apenas garante legibilidade */
@media (max-width: 991.98px) {
  .hero-card__terms {
    font-size: 0.9cqw;
  }
}

/* Mobile — arte vertical (imagens MBL) + texto reposicionado */
@media (max-width: 767.98px) {
  .page {
    max-width: 100%;
  }

  .desk-only {
    display: none !important;
  }

  .mbl-only {
    display: block;
  }

  /* ---------------- HERO ---------------- */
  .dobra--hero {
    background: #100101 url("../img/bg-MBL.jpg") center top / 100% auto no-repeat;
  }

  .dobra--hero .dobra__bg {
    display: none;
  }

  .dobra--hero .dobra__overlay {
    position: relative;
    display: block;
    /* height: 359cqw; */
    height: 343cqw;
    padding: 0;
  }

  .hero-logo {
    top: 7cqw;
    left: 5.5cqw;
    gap: 2cqw;
    z-index: 4;
  }

  .hero-logo__maxi {
    height: 10cqw;
  }

  .hero-logo__years {
    height: 11cqw;
  }

  .hero-copy {
    position: absolute;
    top: 31cqw;
    left: 5.5cqw;
    width: 55cqw;
    z-index: 3;
  }

  .hero-title-img {
    width: 55cqw;
  }

  .hero-lead {
    width: 49cqw;
    font-size: 3.25cqw;
    line-height: 1.28;
    margin-top: 4cqw;
  }

  .btn-tour {
    font-size: 2.85cqw;
    line-height: 1.15;
  }

  .btn-tour strong,
  .btn-tour span {
    padding: 0.75cqw 1.5cqw;
  }

  .btn-tour span:first-of-type {
    margin-top: 2cqw;
  }

  .hero-copy .btn-tour {
    margin-top: 7.5cqw;
  }

  .hero-alunos-mbl {
    position: absolute;
    top: 0cqw;
    /* right: -1.5cqw; */
    right: 0;
    width: 95cqw;
    height: auto;
    margin: 0;
    z-index: 2;
  }

  .hero-card {
    --hero-card-gutter: 3.5cqw;
    position: absolute;
    top: 99cqw;
    left: 6.5cqw;
    width: 87cqw;
    margin: 0;
    padding: 5cqw var(--hero-card-gutter) 0;
    border-radius: 5cqw;
    box-shadow: none;
    z-index: 5;
  }

  .hero-card__eyebrow {
    font-size: 7cqw;
    line-height: 50%;
  }

  .hero-card__title {
    margin-top: 0.5cqw;
    font-size: 7.2cqw;
    line-height: 0;
    margin-bottom: 1rem;
  }

  .hero-card__date {
    font-size: 8.5cqw;
    padding: 1cqw 4cqw 1.3cqw;
    border-radius: 3cqw;
    margin-top: 2.2cqw;
  }

  .hero-card__embed {
    height: 184cqw;
    margin-top: -3cqw;
    padding-top: 3cqw;
    border-radius: 0;
  }

  .hero-card__terms {
    font-size: 1.8cqw;
    padding-top: 2cqw;
  }

  .hero-links {
    display: flex;
    position: absolute;
    top: auto;
    /* bottom: 4cqw; */
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 12cqw;
    padding: 2.5cqw 6.5cqw;
    /* background: rgba(16, 1, 1, 0.94); */
    align-items: center;
    justify-content: space-between;
    gap: 4cqw;
    z-index: 6;
    padding-bottom: 20px;
  }

  .dobra__overlay br {
    display: none;
  }

  .hero-links a {
    color: #ccbe77;
    font-size: 3.2cqw;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.7cqw;
    text-shadow: none;
  }

  /* ---------------- DOBRA 2 ---------------- */
  .dobra--2 {
    background: var(--c-cream);
    aspect-ratio: auto;
    overflow: visible;
  }

  .dobra--2::before {
    content: "";
    display: block;
    width: 100%;
    height: 12cqw;
    background: linear-gradient(to bottom,
        #ccbe77 0,
        #ccbe77 46%,
        #c40f17 46%,
        #c40f17 100%);
  }

  .dobra--2 .dobra__bg {
    display: none;
  }

  .dobra--2 .dobra__overlay {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.25rem;
    background: #FCF0AC;
  }

  .d2-text {
    position: static;
    width: 100%;
  }

  .d2-title span,
  .d2-title strong {
    font-size: 2rem;
  }

  .d2-sub {
    font-size: 1.2rem;
    margin-top: 0.8rem;
  }

  .d2-p {
    font-size: 0.98rem;
    margin-top: 0.8rem;
  }

  .d2-aluno-mbl {
    width: calc(100% + 3.6rem);
    height: auto;
    max-width: none;
    margin: 1.2rem -1.8rem -22cqw;
    position: relative;
    z-index: 3;
  }

  /* ---------------- DOBRA 3 (empilhado) ---------------- */
  .dobra--3 {
    background: var(--c-gold);
  }

  .dobra--3 .dobra__overlay {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .d3-text {
    position: static;
    width: 100%;
    order: 1;
    padding: 1.4rem 1.25rem 20px;
  }

  .d3-img-mbl {
    width: 100%;
    height: auto;
    order: 2;
    margin: 0;
  }

  .d3-title span,
  .d3-title strong {
    font-size: 2rem;
  }

  .d3-title span {
    color: var(--c-dark);
    font-weight: 500;
    padding-top: 40px;
  }

  .d3-p {
    font-size: 1rem;
    margin: 0.8rem 0 1rem;
  }

  .dobra--3 .pill-list {
    gap: 0.6rem;
  }

  .dobra--3 .pill-list li {
    min-height: 0;
    font-size: 0.95rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0 0.5rem 0.5rem 0;
    border-left-width: 0.3rem;
    background: var(--c-maroon);
    color: var(--c-white);
  }

  .dobra--3 .btn-cta {
    display: block;
    width: auto;
    font-size: 1.1rem;
    padding: 0.8rem 2.4rem;
    margin-top: 1.2rem;

  }

  /* ---------------- DOBRA 4 (overlay na arte mobile) ---------------- */
  .d4-text {
    position: absolute;
    top: 4%;
    left: 6%;
    width: 88%;
  }

  .d4-title {
    font-size: 6.4cqw;
  }

  .d4-sub {
    font-size: 3.4cqw;
    margin: 2cqw 0 2.6cqw;
  }

  .dobra--4 .pill-list {
    gap: 1.6cqw;
  }

  .dobra--4 .pill-list li {
    min-height: 0;
    font-size: 3cqw;
    padding: 2cqw 2.6cqw;
    border: 0;
    border-left: 4.05cqw solid #ccbe77;
    border-radius: 0;
    background: var(--c-red-dark);
    color: #f4e8bd;
  }

  .dobra--4 .btn-cta {
    display: flex;
    width: min(50cqw, 13rem);
    font-size: 3.6cqw;
    padding: 2cqw 4cqw;
    margin: 9cqw auto 0;
    justify-content: center;
    color: #c90000;
    background: linear-gradient(180deg, var(--c-gold-2), var(--c-gold-dark));
  }

  /* ---------------- DOBRA 5 (overlay na arte mobile) ---------------- */
  .dobra--5 {
    overflow: hidden;
  }

  .d5-text {
    position: absolute;
    top: 5%;
    left: 6%;
    width: 88%;
  }

  .d5-title {
    font-size: 6cqw;
  }

  .d5-p {
    font-size: 3.6cqw;
    margin: 3cqw 0 4cqw;
  }

  .dobra--5>picture>.dobra__bg {
    margin-top: 0;
  }

  .dobra--5 .btn-cta {
    display: flex;
    width: 98%;
    font-size: 3.8cqw;
    padding: 2.2cqw 7cqw;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
  }

  .footer {
    display: grid;
    grid-template-columns: auto auto;
    width: 100%;
    min-height: 52cqw;
    padding: 9cqw 5cqw 6cqw;
    align-items: center;
    justify-content: center;
    column-gap: 9cqw;
    row-gap: 4.5cqw;
    text-align: center;
  }

  .footer__logo {
    grid-column: 1 / -1;
    width: 100%;
    gap: 5cqw;
  }

  .footer__maxi {
    height: 15.5cqw;
  }

  .footer__years {
    height: 16.5cqw;
  }

  .footer__links {
    width: auto;
    justify-content: center;
    gap: 8cqw;
  }

  .footer__links a {
    font-size: 3.25cqw;
  }

  .footer__social {
    width: auto;
    justify-content: center;
    gap: 3cqw;
  }

  .footer__icon {
    width: 6.8cqw;
    height: 6.8cqw;
  }

  .footer__icon svg {
    width: 4cqw;
    height: 4cqw;
  }
}

@media (max-width: 767.98px) {
  .desktop-only {
    display: none !important;
  }
}