/* ==========================================================================
   Operação — o gap no cotidiano + diagramas
   ========================================================================== */

.operation {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-black);
  background-color: var(--color-red);
}

.operation__intro {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 90.2778vw;
}

.operation__portrait {
  position: absolute;
  width: 43.125vw;
  display: block;
  height: 49.0972vw;
  overflow: hidden;
  top: 17.0139vw;
  left: 5.2778vw;
  border-radius: var(--radius);
}

.operation__portrait-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.operation__title {
  /* Edge to edge: one line spanning the page between the 40px gutters */
  margin: 12.7083vw 2.7778vw 0;
  width: auto;
  white-space: nowrap;
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.75vw;
  color: var(--color-black);
  line-height: 1.06;
}

.operation__gap-line {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5278vw;
  color: var(--color-black);
  line-height: 1.1;
  transform: translate(0%, -50%);
}

.operation__gap-line--espaco-entre {
  width: 14.0278vw;
  top: 30.25vw;
  left: 46.5972vw;
}

.operation__gap-line--entre-estrategia {
  width: 16.5972vw;
  top: 46vw;
  left: 62.1528vw;
}

.operation__gap-line--entre-marca {
  width: 12.8472vw;
  top: 36.3vw;
  left: 80.4167vw;
}

/* List that holds the floating labels (each one is positioned on its own) */
.operation__fragments {
  margin: 0;
  padding: 0;
  list-style: none;
}

.operation__fragment {
  position: absolute;
  width: fit-content;
  padding: 0.6944vw;
  display: block;
  z-index: 4;
  border-radius: var(--radius);
  border: 1px dashed var(--color-black);
  background-color: var(--color-pink);
}

.operation__fragment--conteudo {
  top: 47.5vw;
  left: 4.8611vw;
}

.operation__fragment--campanha {
  top: 27.9861vw;
  left: 2.7083vw;
}

.operation__fragment--midia {
  top: 36.9444vw;
  left: 9.3056vw;
}

.operation__fragment--influencia {
  top: 32.9861vw;
  left: 43.1944vw;
}

.operation__fragment--produto {
  top: 63.125vw;
  left: 11.7361vw;
}

.operation__fragment--commerce {
  top: 49.1667vw;
  left: 44.0278vw;
}

.operation__fragment--cultura {
  top: 51vw;
  left: 69.1667vw;
}

.operation__fragment--comercial {
  top: 40.9722vw;
  left: 82.4306vw;
}

.operation__fragment--experiencia {
  top: 27vw;
  left: 81.6667vw;
}

.operation__fragment--atendimento {
  top: 27.2222vw;
  left: 62.1528vw;
}

.operation__fragment--pdv {
  top: 55.5556vw;
  left: 32.6389vw;
}

.operation__fragment-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.1111vw;
  color: var(--color-black);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.operation__statement {
  position: relative;
  width: calc(100% - 47.5vw);
  display: block;
  z-index: 3;
  margin: 34.375vw 2.7778vw 0 44.7222vw;
}

.operation__statement-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.8889vw;
  color: var(--color-black);
  line-height: 1.06;
}

.operation__statement-line {
  position: relative;
  width: 100%;
  display: block;
  font-size: 0;
}

.operation__statement-subtitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.9444vw;
  color: var(--color-black);
  line-height: 1.06;
  display: inline;
}

.operation__statement-accent {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 5.4167vw;
  color: var(--color-black);
  line-height: 1.1;
  display: inline;
}

.operation__spoiler {
  margin: 1.3889vw 3.0417vw 0 auto;
  width: 31.2206vw;
  position: relative;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.9444vw;
  color: var(--color-black);
  line-height: 1.1;
  text-align: center;
  transform: rotate(-1.16deg);
}

.operation__sectorized {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 64.0972vw;
}

.operation__diagram {
  position: absolute;
  width: 100%;
  display: block;
  height: 100%;
  top: 0;
  left: 0;
}

/* Sectorized drawing sits a little higher, closer to the intro above */
.operation__sectorized > .operation__diagram {
  top: -4.1667vw;
}

/* Diagram drawings: inline SVGs from partials/diagram-*.html,
   placed as in the Figma frame (desktop 1440, mobile 440) */
.operation__svg {
  position: absolute;
  display: block;
  height: auto;
}

.operation__svg--mobile {
  display: none;
}

.operation__sectorized .operation__svg--desktop {
  top: 3.8194vw;
  left: 3.125vw;
  width: 66.7361vw;
}

.operation__unified .operation__svg--desktop {
  top: 15vw;
  left: 12.0139vw;
  width: 75.9722vw;
}

/* Each part animates around its own centre (js/modules/operation.js) */
.operation__svg .operation__part {
  transform-box: fill-box;
  transform-origin: center;
}

.operation__sectorized-label {
  margin: 0 0 0 70.5556vw;
  width: 25.2778vw;
  position: relative;
  z-index: 4;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.25vw;
  color: var(--color-black);
  letter-spacing: 0.275vw;
  line-height: 1.1;
  text-align: center;
  padding: 1.25vw 0;
  background-color: var(--color-pink);
}

.operation__sectorized-title {
  margin: 1.875vw 4.1667vw 0 auto;
  width: 39.0278vw;
  position: relative;
  z-index: 4;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1667vw;
  color: var(--color-black);
  line-height: 1.06;
  text-align: right;
}

.operation__sectorized-text {
  margin: 1.9444vw 4.1667vw 0 auto;
  width: 23.0556vw;
  position: relative;
  z-index: 4;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.6667vw;
  color: var(--color-black);
  line-height: 1.1;
  text-align: right;
}

.operation__unified {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 85.9028vw;
}

.operation__unified-label {
  margin: 0 0 0 2.7778vw;
  width: 23.2639vw;
  position: relative;
  z-index: 4;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.25vw;
  color: var(--color-black);
  letter-spacing: 0.275vw;
  line-height: 1.1;
  text-align: center;
  padding: 1.25vw 0;
  background-color: var(--color-pink);
}

.operation__unified-title {
  margin: 1.7917vw 0 0 2.7778vw;
  width: 33.75vw;
  position: relative;
  z-index: 4;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1667vw;
  color: var(--color-black);
  line-height: 1.06;
}

.operation__unified-text {
  margin: 45.6806vw 2.8472vw 0 auto;
  width: 21.3889vw;
  position: relative;
  z-index: 4;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.6667vw;
  color: var(--color-black);
  line-height: 1.1;
  text-align: right;
}

.operation__ecosystem {
  position: relative;
  width: 37.5694vw;
  display: block;
  z-index: 4;
  font-size: 0;
  margin: 2.4375vw 2.8472vw 0 auto;
  text-align: right;
}

.operation__ecosystem-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.75vw;
  color: var(--color-black);
  line-height: 1.06;
  display: inline;
}

.operation__ecosystem-accent {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 3.1944vw;
  color: var(--color-black);
  line-height: 1.1;
  display: inline;
}

/* Mobile */
@media (max-width: 767px) {
  .operation__intro {
    min-height: 240vw;
  }

  .operation__portrait {
    width: 79.0909vw;
    height: 80vw;
    position: absolute;
    top: 53.1818vw;
    left: 50%;
    transform: translate(-50%, 0%);
  }

  .operation__title {
    width: 79.5455vw;
    font-size: 18.1818vw;
    margin: 15.4545vw 0 5px 2.7273vw;
    white-space: normal;
  }

  .operation__gap-line {
    font-size: 3.6364vw;
    display: none;
  }

  .operation__fragment {
    position: absolute;
    padding: 2.2727vw;
  }

  .operation__fragment--conteudo {
    top: 50.4545vw;
    left: 67.9545vw;
  }

  .operation__fragment--campanha {
    top: 98.6364vw;
    left: 2.9545vw;
  }

  .operation__fragment--midia {
    top: 69.5455vw;
    left: 82.9545vw;
  }

  .operation__fragment--influencia {
    top: 47.9545vw;
    left: 28.1818vw;
  }

  .operation__fragment--produto {
    top: 127.0455vw;
    left: 65.2273vw;
  }

  .operation__fragment--commerce {
    top: 118.4091vw;
    left: 6.3636vw;
  }

  .operation__fragment--cultura {
    top: 78.1818vw;
    left: 3.6364vw;
  }

  .operation__fragment--comercial {
    top: 109.7727vw;
    left: 74.7727vw;
  }

  .operation__fragment--experiencia {
    top: 128.8636vw;
    left: 30.6818vw;
  }

  .operation__fragment--atendimento {
    top: 57.7273vw;
    left: 3.8636vw;
  }

  .operation__fragment--pdv {
    top: 92.5vw;
    left: 83.6364vw;
  }

  .operation__fragment-text {
    font-size: 2.7273vw;
  }

  .operation__statement {
    width: calc(100% - 5.6818vw);
    margin: 87.7273vw 2.7273vw 0 2.9545vw;
  }

  .operation__statement-title {
    font-size: 6.3636vw;
  }

  .operation__statement-line {
    padding-top: 2px;
  }

  .operation__statement-subtitle {
    font-size: 15.4545vw;
  }

  .operation__statement-accent {
    font-size: 13.1818vw;
  }

  .operation__spoiler {
    width: 67.9434vw;
    font-size: 4.5454vw;
    margin: 3.6364vw auto 0;
  }

  .operation__sectorized {
    min-height: 155.2273vw;
  }

  .operation__sectorized > .operation__diagram {
    top: 0;
  }

  .operation__svg--desktop {
    display: none;
  }

  .operation__svg--mobile {
    display: block;
  }

  .operation__sectorized .operation__svg--mobile {
    top: 54.0818vw;
    left: 2.2727vw;
    width: 95.6818vw;
  }

  .operation__unified .operation__svg--mobile {
    top: 58.3636vw;
    left: 1.3636vw;
    width: 98.6364vw;
  }

  .operation__sectorized-label {
    width: 63.4091vw;
    font-size: 3.1818vw;
    letter-spacing: 0.7vw;
    padding: 4.5454vw 0;
    margin: 0 0 0 33.1818vw;
  }

  .operation__sectorized-title {
    width: 76.1364vw;
    font-size: 9.0909vw;
    margin: 5.6818vw 3.4091vw 0 auto;
  }

  .operation__sectorized-text {
    width: 50vw;
    font-size: 3.6364vw;
    margin: 87.0455vw 3.4091vw 0 auto;
    display: none;
  }

  .operation__unified {
    min-height: 220.6818vw;
  }

  .operation__unified-label {
    width: 63.4091vw;
    font-size: 3.1818vw;
    letter-spacing: 0.7vw;
    padding: 4.5454vw 0;
    margin: 0 0 0 3.6364vw;
  }

  .operation__unified-title {
    width: 75.2273vw;
    font-size: 9.0909vw;
    margin: 5vw 0 0 3.6364vw;
  }

  .operation__unified-text {
    width: 46.2273vw;
    font-size: 3.6364vw;
    margin: 114.7557vw 3.6364vw 0 auto;
  }

  .operation__ecosystem {
    width: 87.2727vw;
    margin: 7.7727vw 3.4091vw 0 auto;
  }

  .operation__ecosystem-title {
    font-size: 9.0909vw;
  }

  .operation__ecosystem-accent {
    font-size: 7.2727vw;
  }
}