/* ==========================================================================
   Ilustrações dos benefícios, desenhadas em CSS (sem imagens).
   ========================================================================== */

/* Cartão de embarque · Comunidade 1% */
.pass {
  width: 286px; height: 136px; display: flex; overflow: hidden;
  border-radius: 14px; background: var(--paper); color: var(--ink);
  transform: rotate(3deg); box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}
.pass__main { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 15px 16px; }
.pass__main small { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pass__route {
  display: flex; align-items: center; gap: 8px;
  font-stretch: var(--stretch-condensed); font-weight: 900; font-size: 44px; line-height: .9;
}
.pass__route svg { width: 28px; height: 16px; fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pass__stub { position: relative; width: 56px; background: var(--green); border-left: 3px dashed var(--ink); }
.pass__stub::after {
  content: ""; position: absolute; inset: 18px 19px;
  background: repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 6px, var(--ink) 6px 7px, transparent 7px 10px);
}

/* Celular com acesso vitalício · MEDsimple */
.phone {
  width: 138px; height: 184px; padding: 14px 12px; border-radius: 24px;
  border: 5px solid #3A3A3A; background: var(--paper); color: var(--ink);
  transform: rotate(-5deg); box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}
.phone__screen { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.phone__screen::before { content: ""; width: 38px; height: 5px; border-radius: 3px; background: #A8A49C; }
.phone__inf { width: 76px; height: 38px; fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; overflow: visible; }
.phone__screen small { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-align: center; text-transform: uppercase; }

/* Certificado do Curso MEDEletro · MEDGRUPO (grafia oficial: MEDEletro) */
.course {
  position: relative; width: 272px; height: 152px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 18px; border: 6px solid var(--green); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  transform: rotate(-3deg); box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}
.course small { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
/* SEM text-transform: o nome é "MEDEletro" (grafia oficial, caixa mista). Caixa alta viraria "MEDELETRO". */
.course b { font-stretch: var(--stretch-condensed); font-weight: 900; font-size: 42px; line-height: .9; }
.course i { display: block; width: 110px; height: 2px; background: var(--ink); }
.course::after { content: ""; position: absolute; right: 16px; bottom: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--green); }

/* Leque do hero (telas largas).
   Padrão = 2 cartas (sem MEDGRUPO): passagem e celular cruzados no meio, total embaixo.
   .fan--3 (posto pelo JS quando o card do MEDEletro aparece) = layout de 3 cartas. */
.fan { position: relative; width: 420px; height: 400px; }
.fan__item { position: absolute; }
.fan__item--pass { left: 8px; top: 74px; z-index: 2; }
.fan__item--phone { right: 18px; top: 120px; z-index: 3; }
.fan--3 { height: 440px; }
.fan--3 .fan__item--pass { left: 6px; top: 34px; z-index: 2; }
.fan--3 .fan__item--course { left: 92px; top: 212px; z-index: 3; }
.fan--3 .fan__item--phone { right: 4px; top: 70px; z-index: 1; }
.fan__item--pass .pass { transform: rotate(-9deg); }
.fan__item--course .course { transform: rotate(6deg); }
.fan__item--phone .phone { transform: rotate(11deg); }
.fan__total {
  position: absolute; left: -18px; bottom: 6px; z-index: 4;
  display: flex; align-items: baseline; gap: 6px; padding: 10px 16px 12px;
  border-radius: 14px; background: var(--ink); border: 1.5px solid var(--green);
  font-family: var(--f-mono); font-weight: 700; font-size: 16px; color: var(--green);
  transform: rotate(-4deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.fan__total b { font-family: var(--f-sans); font-stretch: var(--stretch-condensed); font-weight: 900; font-size: 54px; line-height: .8; }