/* ==========================================================================
   Meet Beatriz (Canva page 14, design of 15/10/2026).
   Desktop: sizes and positions in Canva pixels of the 1366px export (--e),
   from referencias/canva/v2-2026-10-15/spec/p14-meet-beatriz.txt. Image
   positions were fitted on the export (the trimmed WebP files differ from the
   Canva element boxes). Text tops are corrected for CSS half-leading.
   Comments give the design y of each section.
   Mobile (<= 900px): no design, stacked layout adapted by the developer.
   ========================================================================== */

/* Background scribbles (page coordinates) --------------------------------- */
.mb-deco { z-index: 0; max-width: none; height: auto; }
.mb-deco--blue { left: calc(-424 * var(--e)); top: calc(-120 * var(--e)); width: calc(1018 * var(--e)); transform: rotate(-3.2deg); }
.mb-deco--lime { left: calc(739 * var(--e)); top: calc(-368 * var(--e)); width: calc(1025 * var(--e)); transform: rotate(141deg); opacity: .27; }

.mb main > section, .mb-ribbon { position: relative; }

/* Hero: y 187 to 860 ----------------------------------------------------------- */
.mb-hero { height: calc(673 * var(--e)); z-index: 1; }
.mb-hero__copy > * { position: absolute; z-index: 2; }
.mb-hero__hello { left: calc(136 * var(--e)); top: calc(43.3 * var(--e)); }   /* sticker; bottom where the lettering ended */
.mb-hero__title {
  left: calc(115.4 * var(--e)); top: calc(117.6 * var(--e)); width: calc(578 * var(--e));
  color: var(--blue); font-weight: 400; font-size: calc(38.87 * var(--e)); line-height: 1.14; letter-spacing: -.078em;
}
.mb-hero__title strong { font-weight: 900; }
.mb-hero__btn {
  left: calc(109.4 * var(--e)); top: calc(325.9 * var(--e)); width: calc(295 * var(--e)); height: calc(54.7 * var(--e));
  justify-content: flex-start; padding-left: calc(19 * var(--e)); gap: calc(10 * var(--e));
  border-width: calc(4.4 * var(--e)); color: var(--red); font-size: calc(35.17 * var(--e)); letter-spacing: -.078em;
}
.mb-hero__btn svg { width: calc(36 * var(--e)); height: calc(24.8 * var(--e)); }

/* Badge, name tag and stickers. The box spans x 757 to 1402 and y -192 to 786
   of the design; children use --a = 1 design px inside it, so the group can be
   scaled as one on mobile. */
.mb-hero__art {
  position: absolute; left: calc(757 * var(--e)); top: calc(-379 * var(--e));
  width: calc(645 * var(--e)); aspect-ratio: 645 / 978; container-type: inline-size;
}
.mb-hero__art > * { --a: calc(100cqw / 645); position: absolute; height: auto; }
.mb-hero__badge  { left: calc(157 * var(--a)); top: 0; width: calc(488 * var(--a)); z-index: 1; }
.mb-hero__tag    { left: calc(71 * var(--a)); top: calc(398 * var(--a)); width: calc(235 * var(--a)); z-index: 2; filter: drop-shadow(0 calc(4 * var(--a)) calc(6 * var(--a)) rgb(0 0 0 / .25)); }
.mb-hero__daisy  { left: calc(123 * var(--a)); top: calc(575 * var(--a)); width: calc(92 * var(--a)); z-index: 2; }
.mb-hero__tomato { left: calc(40 * var(--a)); top: calc(681 * var(--a)); width: calc(126 * var(--a)); z-index: 2; }

/* Four tilted cards: y 860 to 1384 ------------------------------------------- */
.mb-cards { height: calc(524 * var(--e)); z-index: 1; }
.mb-card { position: absolute; width: calc(301.5 * var(--e)); container-type: inline-size; }
.mb-card--green  { left: calc(166.4 * var(--e)); top: calc(128.7 * var(--e)); transform: rotate(-6.5deg); z-index: 1; }
.mb-card--blue   { left: calc(419.8 * var(--e)); top: calc(67.6 * var(--e));  z-index: 2; }
.mb-card--orange { left: calc(662.8 * var(--e)); top: calc(128.7 * var(--e)); transform: rotate(6deg); z-index: 3; }
.mb-card--pink   { left: calc(910.9 * var(--e)); top: calc(50.9 * var(--e));  transform: rotate(-3.4deg); z-index: 4; }
.mb-card__inner {
  --k: calc(100cqw / 301.5);   /* 1 design px inside a 301.5px card */
  position: relative; aspect-ratio: 1132 / 1600; color: #fcfaf2;
  padding: calc(85 * var(--k)) calc(53 * var(--k)) 0 calc(33 * var(--k));
  border-radius: calc(20 * var(--k)); overflow: hidden;
  text-shadow: 0 calc(2 * var(--k)) calc(6 * var(--k)) rgb(0 0 0 / .28);
}
.mb-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.mb-card__inner { isolation: isolate; }
.mb-card__logo { width: calc(65 * var(--k)); height: auto; margin-bottom: calc(10 * var(--k)); filter: drop-shadow(0 calc(2 * var(--k)) calc(4 * var(--k)) rgb(0 0 0 / .25)); }
.mb-card__title { font-weight: 900; font-size: calc(32 * var(--k)); line-height: 1.05; letter-spacing: -.078em; }
.mb-card__text { margin-top: calc(2 * var(--k)); font-weight: 300; font-size: calc(22.5 * var(--k)); line-height: 1.48; letter-spacing: -.078em; }

/* Ribbon: y 1384 to 1717 ------------------------------------------------------ */
.mb-ribbon { height: calc(333 * var(--e)); }
.mb-ribbon img { position: absolute; left: calc(4 * var(--e)); top: 0; width: calc(1366 * var(--e)); max-width: none; height: auto; }

/* This or That: y 1717 to 2480 ------------------------------------------------- */
.mb-tot { height: calc(763 * var(--e)); z-index: 2; }
.mb-tot > *, .mb-tot__item { position: absolute; }
.mb-tot__list { position: static; }
.mb-tot__marker { left: calc(439.3 * var(--e)); top: calc(64.3 * var(--e)); width: calc(274.5 * var(--e)); height: calc(45.3 * var(--e)); transform: rotate(1.9deg); }
.mb-tot__title {
  left: calc(462.4 * var(--e)); top: calc(38.9 * var(--e)); width: calc(453.1 * var(--e)); text-align: center;
  font-weight: 900; font-size: calc(80.2 * var(--e)); line-height: 1.14; letter-spacing: -.078em;
}
.mb-tot__intro {
  left: calc(120.1 * var(--e)); top: calc(141.9 * var(--e)); width: calc(348.4 * var(--e));
  color: var(--blue); font-weight: 400; font-size: calc(35.71 * var(--e)); line-height: 1.14; letter-spacing: -.078em;
}
.mb-tot__intro strong { font-weight: 900; }
.mb-tot__item { width: calc(var(--w, 257.8) * var(--e)); line-height: 1.4; letter-spacing: -.078em; }
.mb-tot__list--this .mb-tot__item { font-weight: 800; font-size: calc(32.51 * var(--e)); }
.mb-tot__list--that .mb-tot__item { font-weight: 300; font-size: calc(31.69 * var(--e)); --w: 251.4; }
.mb-tot__item--l1 { left: calc(167.7 * var(--e)); top: calc(256.8 * var(--e)); --w: 305.7; transform: rotate(1.2deg); }
.mb-tot__item--l2 { left: calc(105.6 * var(--e)); top: calc(379.4 * var(--e)); transform: rotate(-7.6deg); }
.mb-tot__item--l3 { left: calc(195.5 * var(--e)); top: calc(443.1 * var(--e)); transform: rotate(4.7deg); text-align: right; }
.mb-tot__item--l4 { left: calc(129.2 * var(--e)); top: calc(509.5 * var(--e)); transform: rotate(-12.2deg); }
.mb-tot__item--l5 { left: calc(168 * var(--e));   top: calc(582.5 * var(--e)); --w: 299.8; transform: rotate(2.6deg); text-align: right; }
.mb-tot__item--r1 { left: calc(1006.5 * var(--e)); top: calc(226.1 * var(--e)); transform: rotate(5.5deg); }
.mb-tot__item--r2 { left: calc(953.6 * var(--e));  top: calc(295.2 * var(--e)); transform: rotate(-3.3deg); }
.mb-tot__item--r3 { left: calc(1009 * var(--e));   top: calc(380.7 * var(--e)); transform: rotate(9deg); }
.mb-tot__item--r4 { left: calc(953.5 * var(--e));  top: calc(434.7 * var(--e)); transform: rotate(-7.9deg); }
.mb-tot__list--that .mb-tot__item--r5 { left: calc(964.8 * var(--e)); top: calc(528.4 * var(--e)); --w: 292.3; transform: rotate(7deg); text-align: right; }
.mb-tot__photo { left: calc(500 * var(--e)); top: calc(168 * var(--e)); width: calc(382 * var(--e)); height: auto; }
.mb-tot__strawberry { left: calc(1204 * var(--e)); top: calc(26.9 * var(--e)); width: calc(282 * var(--e)); height: auto; }   /* Canva box (2160x1620 canvas) */
.mb-tot__lemon { left: calc(-151.7 * var(--e)); top: calc(509.4 * var(--e)); width: calc(342 * var(--e)); height: auto; }   /* Canva box (2160x1620 canvas) */

/* Plot twist: y 2480 to 3367 ------------------------------------------------- */
.mb-plot { height: calc(887 * var(--e)); z-index: 1; }
.mb-plot__panel {
  position: absolute; left: calc(45.6 * var(--e)); top: calc(39.7 * var(--e));
  width: calc(1274.8 * var(--e)); height: calc(671.7 * var(--e)); border-radius: calc(40 * var(--e)); background: var(--blue-pale);
}
.mb-plot__scribble {
  z-index: 1; left: calc(112 * var(--e)); top: calc(-530 * var(--e));   /* fitted: spec box differs */
  width: calc(1505 * var(--e)); height: auto; max-width: none; transform: rotate(-62deg);
}
/* Card (75): text laid over the blank area of the image; --c = 1 design px
   inside the 851px card. */
.mb-plot__card {
  position: absolute; z-index: 2; left: calc(254 * var(--e)); top: calc(95 * var(--e));
  width: calc(851 * var(--e)); container-type: inline-size;
}
.mb-plot__img { width: 100%; height: auto; }
.mb-plot__text > * { --c: calc(100cqw / 851); position: absolute; transform: rotate(-5.5deg); letter-spacing: -.078em; }
.mb-plot__title {
  left: calc(292.3 * var(--c)); top: calc(112 * var(--c)); width: calc(338.1 * var(--c));
  color: var(--blue); font-weight: 900; font-size: calc(33.62 * var(--c)); line-height: 1.27;
}
.mb-plot__facts {
  left: calc(303.4 * var(--c)); top: calc(187.6 * var(--c)); width: calc(474.2 * var(--c));
  font-size: calc(24.81 * var(--c)); line-height: 2.5;
}
.mb-plot__facts dt { display: inline; font-weight: 900; }
.mb-plot__facts dd { display: inline; font-weight: 300; }
.mb-plot__facts div + div dt { margin-right: .25em; }

/* Footer with the closing call to action: y 3367 to 3823 ---------------------- */
.mb-footer {
  align-items: flex-start;
  padding: calc(66 * var(--e)) calc(131.7 * var(--e)) calc(108.5 * var(--e)) calc(156.9 * var(--e));
}
.mb-cta { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: flex-start; }
.mb-cta__nao { margin-left: calc(4 * var(--e)); color: var(--red); font-size: calc(90.37 * var(--e)); line-height: 1.2; }
.mb-cta__title {
  margin-top: calc(-26 * var(--e)); width: calc(360.9 * var(--e));
  font-weight: 900; font-size: calc(40.55 * var(--e)); line-height: 1.14; letter-spacing: -.078em;
}
.mb-cta__marker {
  position: absolute; z-index: -1; left: calc(-12.4 * var(--e)); top: calc(170.9 * var(--e));
  width: calc(317.1 * var(--e)); height: calc(52.3 * var(--e)); transform: rotate(1.9deg);
}
.mb-cta__btn {
  margin-top: calc(22 * var(--e)); margin-left: calc(-3.8 * var(--e)); width: calc(222.2 * var(--e)); height: calc(37.7 * var(--e));
  border-width: calc(3 * var(--e)); color: var(--blue); font-size: calc(21.48 * var(--e)); letter-spacing: -.078em; gap: calc(6 * var(--e));
}
.mb-cta__btn svg { width: calc(24.8 * var(--e)); height: calc(17.1 * var(--e)); }
.mb-footer .site-footer__info {
  margin-top: calc(102.2 * var(--e)); font-size: max(12px, calc(17.84 * var(--e)));
}

/* Mobile and tablet ---------------------------------------------------------- */
@media (max-width: 900px) {
  .mb-deco--blue { left: calc(-300 * var(--e)); top: calc(-40 * var(--e)); width: calc(700 * var(--e)); }
  .mb-deco--lime { display: none; }

  /* Hero: copy, then the badge group */
  .mb-hero { height: auto; padding: calc(40 * var(--e)) calc(32 * var(--e)) 0; }
  .mb-hero__copy > * { position: static; }
  .mb-hero__hello { width: auto; text-align: left; }
  .mb-hero__title { width: auto; margin-top: calc(6 * var(--e)); font-size: calc(40 * var(--e)); }
  .mb-hero__btn { display: inline-flex; width: auto; height: calc(62 * var(--e)); margin-top: calc(30 * var(--e)); padding: 0 calc(22 * var(--e)); font-size: calc(32 * var(--e)); }
  .mb-hero__art { position: relative; left: auto; top: auto; width: calc(480 * var(--e)); margin: calc(20 * var(--e)) auto 0; }

  /* Cards: carousel */
  .mb-cards { height: auto; margin-top: calc(40 * var(--e)); }
  .mb-cards__list { position: static; }
  .mb-card { position: relative; left: auto !important; top: auto !important; width: calc(380 * var(--e)); transform: none !important; }
  .mb-card:nth-child(odd) .mb-card__inner { transform: rotate(-2deg); }
  .mb-card:nth-child(even) .mb-card__inner { transform: rotate(2deg); }

  .mb-ribbon { height: calc(1800 * var(--e) * 390 / 1600); overflow: hidden; }
  .mb-ribbon img { left: -100%; width: 300%; }

  /* This or That: stacked */
  .mb-tot { height: auto; padding: calc(30 * var(--e)) calc(32 * var(--e)) calc(40 * var(--e)); }
  .mb-tot > *, .mb-tot__item { position: static; transform: none !important; width: auto; }
  .mb-tot .deco { position: absolute; }
  .mb-tot__marker { display: none; }
  .mb-tot__title { position: relative; left: 0; top: 0; width: auto; font-size: calc(72 * var(--e)); }
  .mb-tot__title::before {   /* yellow marker behind "This" */
    content: ""; position: absolute; z-index: -1; left: 6%; top: 32%; width: 48%; height: 46%;
    background: url("../assets/img/design/06-traco-amarelo.webp") center / 100% 100% no-repeat;
  }
  .mb-tot__intro { width: auto; margin-top: calc(30 * var(--e)); font-size: calc(34 * var(--e)); }
  .mb-tot__list { display: flex; flex-direction: column; gap: calc(6 * var(--e)); margin-top: calc(20 * var(--e)); }
  .mb-tot__list .mb-tot__item { width: auto; text-align: left; }
  .mb-tot__list--this .mb-tot__item { font-size: calc(32 * var(--e)); }
  .mb-tot__list--that .mb-tot__item { font-size: calc(31 * var(--e)); }
  .mb-tot__list--this .mb-tot__item:nth-child(odd) { transform: rotate(-2deg) !important; }
  .mb-tot__list--this .mb-tot__item:nth-child(even) { transform: rotate(2deg) !important; margin-left: calc(40 * var(--e)); }
  .mb-tot__list--that { align-items: flex-end; }
  .mb-tot__list--that .mb-tot__item:nth-child(odd) { transform: rotate(3deg) !important; }
  .mb-tot__list--that .mb-tot__item:nth-child(even) { transform: rotate(-3deg) !important; margin-right: calc(40 * var(--e)); }
  .mb-tot__photo { width: calc(360 * var(--e)); margin: calc(30 * var(--e)) auto 0; }
  .mb-tot__strawberry { left: auto; right: calc(-40 * var(--e)); top: calc(0 * var(--e)); width: calc(190 * var(--e)); }
  .mb-tot__lemon { left: calc(-60 * var(--e)); top: auto; bottom: calc(200 * var(--e)); width: calc(150 * var(--e)); }

  /* Plot twist: card image on the panel, text below it (too small on the card) */
  .mb-plot { height: auto; margin: 0 calc(16 * var(--e)); padding: calc(50 * var(--e)) calc(20 * var(--e)) calc(50 * var(--e)); border-radius: calc(40 * var(--e)); background: var(--blue-pale); overflow: hidden; }
  .mb-plot__panel, .mb-plot__scribble { display: none; }
  .mb-plot__card { position: static; width: auto; }
  .mb-plot__text { margin-top: calc(24 * var(--e)); }
  .mb-plot__text > * { position: static; transform: none; width: auto; }
  .mb-plot__title { font-size: calc(38 * var(--e)); }
  .mb-plot__facts { margin-top: calc(14 * var(--e)); font-size: calc(26 * var(--e)); line-height: 1.5; }
  .mb-plot__facts div + div { margin-top: calc(10 * var(--e)); }
  .mb-plot__facts dt { display: block; }
  .mb-plot__facts dd { display: block; }

  /* Footer */
  .mb-footer { padding: calc(70 * var(--e)) calc(32 * var(--e)) calc(60 * var(--e)); }
  .mb-cta__nao { font-size: calc(96 * var(--e)); }
  .mb-cta__title { width: calc(440 * var(--e)); max-width: 100%; font-size: calc(46 * var(--e)); }
  .mb-cta__marker { left: calc(-10 * var(--e)); top: calc(190 * var(--e)); width: calc(350 * var(--e)); height: calc(58 * var(--e)); }
  .mb-cta__btn { width: auto; height: calc(56 * var(--e)); padding: 0 calc(20 * var(--e)); border-width: calc(4 * var(--e)); font-size: calc(26 * var(--e)); }
  .mb-cta__btn svg { width: calc(30 * var(--e)); height: calc(20 * var(--e)); }
  .mb-footer .site-footer__info { margin-top: 0; font-size: max(13px, calc(22 * var(--e))); }
}

/* Header: on this page the design moves the menu left (it ends at x 1203) so
   the lanyard of the badge hangs clear of "Agendar consulta". */
@media (min-width: 901px) {
  .mb .site-header { padding-right: calc(163 * var(--e)); }
}